1 year ago

#372364

test-img

angfreak

How to access micro frontend child app routes in Shell App [Angular 13]

In my remote app I have below routes :

const routes: Routes = [
  {
    path: '',
    component: RNDFirstComponent,
    pathMatch: 'full',
  },
  {
    path: 'rnd2',
    component: RNDSecondComponent,
    pathMatch: 'full',
  },
  {
    path: 'rnd3',
    component: RNDThreeComponent,
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RNDSectionRoutingModule { }

And in Home component I have 3 links for above route and it is working fine for standalone app. After integrating remote app into Shell app getting below error for remote link click :

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'rnd2'

Below is my remote and shell app webpack settings.

Remote
// For remotes (please adjust)
        name: "rdapp",
        filename: "remoteEntry.js",
        exposes: {
            './RNDSectionModule': './/src/app/rnd/rnd.module.ts',
            RNDFirstComponent: './/src/app/rnd/rndfirst.component.ts',
            RNDSecondComponent: './/src/app/rnd/rndsecond.component.ts',
            RNDThreeComponent: './/src/app/rnd/rndthree.component.ts',
        },   

angular

webpack-5

webpack-module-federation

angular-module-federation

0 Answers

Your Answer

Accepted video resources