Angular Routing Lazy Load Children's Children

Question

I am currently stuck on how Angular Routing works and need some help. Basically in my project, I have one core module which used for loading the all the root routes, the home is following:

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'user', loadChildren: 'app/userManagement#UserModule', pathMatch: 'full',canActivate: [AuthGaurd] },
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})


export class AppRoutingModule {}

And in app/userManagement folder I have an index.ts used for imports and declare all the modules:

@NgModule({
  imports: [
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

And my child routing put inside of the UserManagementRoutingModule:

const routes: Routes = [
  {
    path: '',
    component: UserHomeComponent,
  },
  {
    path: 'userDetails',
    component: UserDetailsComponent
  }
];

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

In this way when I go to http://hostname/user it will direct to my UserHomeComponent component, however if i go to http://hostname/user/userDetails Angular didn't redirect to that page. How should I edit my code so that I can access the userDetailsComponent?

Thanks

Scholem

Answer 1

When lazy loading, best practice is to define all routed under a blank path as children. Also, you need to be sure to import CommonModule or BrowserModule in your @ngModules (in your case, since it's a child you will use common).

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

The above will ensure components are properly loaded, and the below will provide best practice routing.

const routes: Routes = [
  {
    path: '',
    children: [
      { path: '', component: UserHomeComponent },
      { path: 'userDetails', component: UserDetailsComponent }
    ]
  }
];

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

Maggiore

I don't think your solution lazy loads at all. – Straightedge

ah sorry for that, you just completed his code, now I understood. – Straightedge

This is the correct approach and actually I also need to remove "pathMatch: 'full'" statement and then the code works properly. Thanks! – Scholem

does this really lazy load the children components?, or only parent? – Alkalimeter

@JenuelGanawed It lazy loads the UserModule, and all components associated with that module. If you want deeper lazy loading you need to create another submodule and lazy load that in a similar fashion. – Maggiore

@Z.Bagley, oh thanks, I was able to read some articles and I realized to create a lazy loading, I have to create modules, and import it on the parent modules as loadChildren right? – Alkalimeter

Answer 2

Removing pathMatch: 'full' in the parent component, solved it for me. I needed this solution, because i want to have a parent wrapper container, with some view logic, that i don't want to repeat in each child view.

Working solution:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComponentsDemoComponent } from './components-demo.component';

const routes: Routes = [
    {
        path: '',
        component: ComponentsDemoComponent,
        // pathMatch: 'full', <<< REMOVE
        children: [
            {
                path: 'modalv3-demo',
                loadComponent: () =>
                    import('./modalv3-demo/modalv3-demo.component').then(
                        (c) => c.Modalv3DemoComponent
                    ),
            },
        ],
    },
    {
        path: '**',
        redirectTo: '',
    },
];

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

Namaqualand