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
– jriver27, Commented Jul 6, 2018 at 19:32
Yes, I export the "routing" class as RouterModule.forChild. and then import it in the dashboard module. — Mark Perry
– Mark Perry, Commented Aug 4, 2018 at 14:39

Mark Perry · Accepted Answer · 2018-07-06 19:39:42Z

1

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] },
    ],
  },

edited Jul 6, 2018 at 19:39

answered Jul 6, 2018 at 18:05

Mark Perry

3,8064 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DWF Over a year ago

This is quite long after you solved the issue, but do you understand why this is the case? This isn't clear to me, and your solution seems like it will help me understand some underlying structure that I haven't been able to grasp just yet with angular.

Collectives™ on Stack Overflow

Angular Lazy loading with multiple child routes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related