Angular Lazy loading with multiple child routes

Question

This is something I really shouldn't be stuck on, but I've not really used lazy loading beyond a single route per module.

I have a lazy loaded module like so:

const appRoutes: Routes = [
...other routes...
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
...other routes...            
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { initialNavigation: 'enabled', preloadingStrategy: PreloadAllModules });

Which points to a module which has child routes:

export const routing: ModuleWithProviders = RouterModule.forChild([
    {
    path: '',
    component: RootComponent, pathMatch: 'full', canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
        },
    children: [
            { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
            { path: 'home', component: HomeComponent, data: { title: 'Dashboard' } },
            { path: 'settings', component: SettingsComponent },
            { path: 'albums', component: AlbumComponent, data: { title: 'Album Management' } },
            { path: 'reviews-admin', component: ReviewAdminComponent, data: { title: 'Reviews' } },
            { path: 'users-admin', component: AlbumComponent, data: { title: 'Users' } },
            { path: 'roles-admin', component: RolesManagmentComponent, data: { title: 'Roles' } },
            { path: 'events-admin', component: EventsManagementComponent, data: { title: 'Events' } },
            { path: 'slider-management', component: SliderManagementComponent, data: { title: 'Slides' } },
            { path: 'galleries', component: GalleryComponent, data: { title: 'Galleries' } },
            { path: 'images', component: ImageFileComponent, data: { title: 'Images' } },
            { path: 'tags', component: TagsComponent, data: { title: 'Tags' } },
            { path: 'about-page', component: AboutPageComponent, data: { title: 'About Page' } },
            { path: 'faq-management', component: FaqManagementComponent, data: { title: 'FAQ Management' } },
            { path: 'blog-management', component: BlogManagementComponent, data: { title: 'Manage Blog Posts' } },
            { path: 'card-management', component: CardManagementComponent, data: { title: 'Manage front page cards' } }
        ]
    }
]);

Problem is that I can't get to the child routes e.g. dashboard/settings

This module was a regular module and worked ok, but I am using server side rendering and had a few 3rd party components that use window which lead me to disable SSR for any route containing "dashboard".

So my question is, how do I have children on a lazy loaded route?

Thanks in advance!

Edit:

I tried declaring each path as a lazy module withing the dashboard module, but when I do that I get the error that the component isn't part of an NgModule which is obviously wrong, because it is, so I am missing something. If I add the lazy child component to dashboard declarations I'm told its declared in 2 modules, if I remove it from one I'm told it's in none.... Pulling my hair out now XD

Are you also importing the Routes into your DashboardModule? imports: [... , RouterModule.forChild(routing),...] — jriver27
Yes, I export the "routing" class as RouterModule.forChild. and then import it in the dashboard module. — Mark Perry

Mark Perry Mark Perry · Accepted Answer · 2018-07-06T18:05:03

So it turns out you can't use pathMatch: 'full' on the root, routes...

    path: '',
    component: RootComponent, pathMatch:'full', canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
    },
    children: [

      { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
      { path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
    ],
  },

became...

    path: '',
    component: RootComponent, canActivate: [AuthGuardAdmin],
        data: {
            title: 'Dashboard',
            meta: [{ name: 'description', content: 'Administration home screen. From here you have access to the configurable parts of the site.' }]
    },
    children: [

      { path: '', component: HomeComponent, data: { title: 'Dashboard' } },
      { path: 'about-page', component: AboutPageComponent, canActivateChild: [AuthGuardAdmin] },
    ],
  },

Angular Lazy loading with multiple child routes

1 Answers