如何在Angular5中延迟加载不同的路由

Question

I am trying to lazy load a module that has children routes. But so far only the main component keep loading. Here is my lazy loading routes module.

export const routes: Routes = [
   { 
    path: '', 
    component: Notfound404Component, pathMatch: 'prefix',
    children: [
      { path: '', pathMatch: 'full', redirectTo: '404' },
      { path: '404', component: Notfound404Component },
      { path: '403', component: Notfound403Component }
    ] 
   }

And in my app.routes module I did this :

 { path: 'error/403', loadChildren: './errors/errors.module#ErrorsModule'},
  { path: 'error', loadChildren: './errors/errors.module#ErrorsModule'}

Expected behavior is that localhost:4200/error loads the Notfound404Component component and localhost:4200/error/403 loads the Notfound403Component

Unfortunately it only loads the Notfound404Component on both routes.

How can I achieve this?

Answer 1

you must put this line to parent route

{ path: '', pathMatch: 'full', redirectTo: '/' },

and in child route replace

{ path: '', pathMatch: 'full', redirectTo: '404' },

with this

{ path: '', component: Notfound404Component },

Answer 2

your routing should be like

Solution 1:

export const routes: Routes = [
   { 
    path: '', 
    component: Notfound404Component,
    children: [
      { path: '', pathMatch: 'full', redirectTo: '404' },
      { path: '404', component: Notfound404Component },
      { path: '403', component: Notfound403Component }
    ] 
   }

Solution 2:

export const routes: Routes = [
   { 
    path: '', 
    component: Notfound404Component,
    children: [
      { path: '', component: Notfound404Component},
      { path: '404', component: Notfound404Component },
      { path: '403', component: Notfound403Component }
    ] 
   }

NOTE: Make sure you create parent component for child route

For eg: <router-outlet></router-outlet>