0

i m trying to implement nested child lazy load routing but i got some problem regarding routing.

here is my routing code:- app.modules.ts looks like

  RouterModule.forRoot([
                         {path:'',redirectTo:'home',pathMatch:'full'},
                         {path:'home',component:HomeComponent},
          {path:'pages',loadChildren:'./pages/pages.module#PagesModule' },
          {path:'**',component: NotFoundComponent}
                       ],{enableTracing:true}) 

pages.module.ts looks like:-

         RouterModule.forChild([
             { path:'', component:PagesComponent,
               children:[
                         {path:'',redirectTo:'user',pathMatch:'full'},
                         {path:'user',component:UserComponent },                                   


    {path:'forms',loadChildren:'./forms/forms.module#CustomFormsModule'}]
      }

]) 

forms.modules.ts:-

RouterModule.forChild([
    {path:'',component:FormsComponent,
          children:[
            {path:'',redirectTo:'general',pathMatch:'full'},
            {path:'general',component:GeneralComponent},
            {path:'advance',component:AdvanceComponent}
        ] }
])

when I type path http://localhost:4200/pages - it redirects me to /pages/general and even if i type pages/general it give me general component as there is no sure route defined in my routermodule.

4
  • Sorry, what's the problem?
    – David
    Feb 10, 2018 at 16:28
  • It will navigate me to general -component even if I don't type full URL(page/forms/general) which I have specified in lazy load path. Also if I remove forms I.e (pages/general) it render general component instead it should give me not found page Feb 11, 2018 at 0:55
  • Have a look at this stackblitz. Maybe you missed something angular-lazy-loading-n98uay.stackblitz.io/pages/user. When you navigate to /pages, it shows the User component
    – David
    Feb 11, 2018 at 8:40
  • stackblitz.com/edit/angular-nested-lazy-route when i type /pages it should give me /pages/user instead it gives /pages/general and also i ve lazy route my general page as /pages/forms/general but general component in accessible through /pages/general . Feb 11, 2018 at 11:48

1 Answer 1

3

The problem is that you are importing Lazy-loaded modules in your code

//pages.module.ts
import { CustomFormsModule } from './forms/forms.module';
//...
  imports: [
CommonModule,
CustomFormsModule, //<--Don't do that

When using lazy loaded modules, do not import them explicitely, otherwise the router gets confused

Here is the edited stackblitz https://stackblitz.com/edit/angular-nested-lazy-route-kahove

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.