CODEWITHSUNDEEP
angulartypescriptlazy-loadingangular-routing
atiyar
atiyar

Reputation: 8305

How to prevent the common layout/shell component to be destroyed when lazy loading a module?

Consider the following two modules -

All these components use a shared shell/layout MainShellComponent which is configured in app-routing.module as -

const routes: Routes = [
    {
        path: '',
        component: MainShellComponent,
        children: [
            { path: 'about', component: AboutComponent },
            { path: 'profile', component: ProfileComponent },
            { path: 'settings', component: SettingsComponent },
            { path: '', component: HomeComponent },
            { path: 'home', redirectTo: '', pathMatch: 'full' }
            { path: '**', component: PageNotFoundComponent }
        ]
    }
];

I wanted to configure the Private module to lazy load. So I changed the code in app-routing.module -

const routes: Routes = [
    {
        path: '',
        component: MainShellComponent,
        children: [
            { path: 'about', component: AboutComponent },
            { path: '', component: HomeComponent },
            { path: 'home', redirectTo: '', pathMatch: 'full' }         
        ]
    },
    {
        path: 'user',
        component: MainShellComponent,
        loadChildren: './private/private.module#PrivateModule'
    },
    { path: '**', component: PageNotFoundComponent }
];

and in private-routing.module -

const routes: Routes = [
    { path: 'profile', component: ProfileComponent },
    { path: 'settings', component: SettingsComponent }
];

Now the Private module is loading lazily but the MainShellComponent is being destroyed and re-constructed for the components in the Private module, and I understand that it is exactly what is supposed to happen under the current route configuration.

I want -

  1. the Public module to be loaded normally(eagerly)
  2. the Private module to be loaded lazily
  3. the MainShellComponent not to be destroyed and re-constructed

So, how can I achieve this?

Upvotes: 0

Views: 477

Answers (1)

JB Nizet
JB Nizet

Reputation: 691973

Leave everything as a child of the shell component:

const routes: Routes = [
    {
        path: '',
        component: MainShellComponent,
        children: [
            { path: 'about', component: AboutComponent },
            { path: '', component: HomeComponent },
            { path: 'home', redirectTo: '', pathMatch: 'full' },
            { path: 'user', loadChildren: './private/private.module#PrivateModule' },
            { path: '**', component: PageNotFoundComponent }
        ]
    }
];

Upvotes: 3

Related Questions