Angular 7: some confusion/strange behavior when using loadChildren in routing

Question

I'm using loadChlidren in application, but I have some confusion/strange behavior that I didn't understand why happend.

I have this app-routing-module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: InformationPageComponent,
    data: {
      title: 'INFO',
      preTitle: 'VISUALIZZA_MODELLO'
    },
  },
  {
    path: '',
    loadChildren: './visualizza-modello/modello.module#ModelloModule',
    canActivateChild: []
  }, 
  {
    path: '**',
    component: PageNotFoundComponent//HomeComponent
  }
];

And in modello-routing-module.ts I have :

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'visualizza-modello',
        data: {
          title: 'DELEGHE',
          breadcrumb: 'VISUALIZZA_MODELLO',
          preTitle: 'VISUALIZZA_MODELLO',
        },
        children: [
          {
            path: 'dettaglio-ditta',
            data: {
              title: 'RICERCA_PAT',
              breadcrumb: 'RICERCA_PAT',
              preTitle: 'VISUALIZZA_MODELLO'
            },
            children: [
              {
                path: 'dettaglio-quadro',
                data: {
                  title: 'DETTAGLIO_MODELLO',
                  breadcrumb: 'VISUALIZZA_MODELLO',
                  preTitle: 'VISUALIZZA_MODELLO'
                },
                component: DettaglioQuadroComponent
              },
              {
                path: '',
                data: {
                  title: 'RICERCA_PAT',
                  breadcrumb: '',
                  preTitle: 'VISUALIZZA_MODELLO'
                },
                component: DettaglioDittaComponent,
              }
            ]
          },
          {
            path: '',
            data: {
              title: 'DELEGHE',
              breadcrumb: '',
              preTitle: 'VISUALIZZA_MODELLO'
            },
            component: DelegheComponent
          },
        ]
      },
    ])
  ],
  exports: [RouterModule]
})

I want this behavior:

When I open project I want to routing in home page. When I click on Menu Visualizza Modello, I want to go on this page. When I click Home on breadcrumb I want to go back in home page.

This works but sometimes when I leave the page and come back only a blank page will appear, not home page.

Can you share with me any idea, how to fix this problem?

Why do you have 2 default `''` routes in your configuration? — , Jul 15 '22 at 09:00
I think the strange behavior occurs because you have defined the same route for two different things on app-routing-module.ts. You need to add different path name for { path: '', loadChildren: './visualizza-modello/modello.module#ModelloModule', canActivateChild: [] }, — etaskin, Jul 15 '22 at 09:01
@MikeS. because it doesn't work for me otherwise. @etaskin I have tried it too `{ path: 'visualizza-modello', loadChildren: './visualizza-modello/modello.module#ModelloModule', canActivateChild: []}, ` but didn't work — aulona aulona, Jul 15 '22 at 09:16
Well, as @etaskin has already mentioned, having the same path for 2 different routes is likely to produce some strange behavior. Can you reproduce your issue over on [stackblitz](https://www.stackblitz.com)? It will be easier to see where the problem lies. — , Jul 15 '22 at 09:22

score 0 · Answer 1 · answered Jul 17 '22 at 15:13

The comments are likely right - you can't have two '' paths.

If you have things set up, then your app-level routing will look similar to this:

app-routing-module.ts

const routes: Routes = {
    {
        path: '', redirectTo: 'home', pathMath: 'full'
    },
    {
        path: 'home', component: HomeComponent
    },
    {
        path: 'visualizza-modello', loadChildren: './visualizza-modello/modello.module#ModelloModule'
    },    
    {
        path: '**', component: PageNotFoundComponent
    },
};

And that's it for your top-level routes. Any pages you want to show in your top, app component <router-outlet> will need to be added to this list, just like the visualizza-modello.

Inside your ModelloModule, you have the routes for this branch of routing. How you do it depends on whether or not your 'new' top level component has a router-outlet or not.

Either it's just a collection of pages to display within the main app router-outlet and you're essentially just defining a new branch of paths that will be displayed in that top-level router:

modello-visualizza-routting.module.ts

const routes: Routes = {
    {
        path: '', component: VisualizzaComponent // this is already url.com/visualizza-modello at this point
    },
    {
        path: 'dettaglio-ditta', component: DettaglioDittaComponent // url.com/visualizza-modello/dettaglio-ditta
    },    
    {
        path: 'dettaglio-quadro', component: DettaglioQuatroComponent // url.com/visualizza-modello/dettaglio-quadro
    },    
    {
        ...
    }
};

Or your main VisalizzaComponent is just a shell component that has its own router-outlet; then you're in the world of child paths.

It's not really that different, you just put those same paths inside children. Same urls, but the children will be rendered inside the new router-outlet instead of the main app one.

modello-visualizza-routting.module.ts

const routes: Routes = {
    {
        path: '',
        component: VisualizzaComponent,
        children: [
            {
                path: '', component: WhateverHomeComponent
            }
            {
                path: 'dettaglio-ditta', component: DettaglioDittaComponent // url.com/visualizza-modello/dettaglio-ditta
            },    
            {
                path: 'dettaglio-quadro', component: DettaglioQuatroComponent // url.com/visualizza-modello/dettaglio-quadro
            },    
            {
                ...
            }
        ]
    }
};

Angular 7: some confusion/strange behavior when using loadChildren in routing

1 Answers1