Angular Router: Load module as child of lazy loaded modules

Question

I have a complex application in which I want to load a module as a child of lazy loaded modules.

For example, I would like the following path:

https://localhost:8080/ui/examplemodule/new

examplemodule and new are each a module, each with its own routing.config file.

My app-routing.module.ts looks like this:

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    canActivate: [LoginRequiredGuard],
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            component: HomeComponent,
          },
          {
            path: 'examplemodule',
            loadChildren: 'app/my-modules/example/example.module#ExampleModule',
            canActivate: [LoginRequiredGuard],
          },
          {
            // examplemodule2
          },
          {
            // examplemodule3
          },
          {
            path: 'new',
            loadChildren: 'app/new/new.module#NewModule',
            canActivate: [LoginRequiredGuard],
          },
        ],
      },
      ...

The new.routing.ts file of the NewModule looks like this:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'new',
    pathMatch: 'full'
  },
  {
    path: 'new',
    component: NewViewComponent,
  },
];

As I have made it currently, I get a "resource not found".

For example I wan't to have the following routes:

https://localhost:8080/ui/examplemodule/new

https://localhost:8080/ui/examplemodule2/new

https://localhost:8080/ui/examplemodule3/new

What am I doing wrong? I hope I could explain it understandably..

Answer 1

I think you need to load the NewModule from inside ExampleModule

So remove your new path from the app module routing and add this bit to ExampleModule's routing

const routes: Routes = [
{
    path: '',
    component: YourParentComponentForExampleModule,
    children: [
      {
        path: '',
        children: [
          //All your other paths here
          //...
          {
            path: 'new',
            loadChildren: 'app/new/new.module#NewModule',
            //canActivate: [LoginRequiredGuard], //You probably don't need it as it's already there on parent module
          },
        ],
      },
  ...