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?

Answer 1

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
            },    
            {
                ...
            }
        ]
    }
};