Angular Lazy Loading on App-Routing.module.ts loading default pages

user_7931113 0
Viewed 225

I have a web app running at Angular 9 and ASP.NET core v2.2, and I have these Routes at app-routing.module.ts,

    const routes: Routes = [
    {
        path: '',
        loadChildren: () => import('./layouts/website-layout/website-layout.module').then(mod => mod.WebsiteLayoutModule),
    },
    {
        path: '**',
        pathMatch: 'full',
        loadChildren: () => import('./error-page/error-page.module').then(mod => mod.AppErrorPageModule)
    }
];

The website-layout-routing.module.ts contains many children routes. For example:

const routes: Routes = [
    {
        path: '',
        component: WebsiteLayoutComponent,
        children: [
                {
                path: WebSitePagesRoutes.LegaL.TermsOfUsePage,
                loadChildren: () => import('../../website-pages/terms-of-use/terms-of-use.module').then(mod => mod.TermsOfUseModule)
            },
            {
                path: WebSitePagesRoutes.LegaL.PrivacyPolicyPage,
                loadChildren: () => import('../../website-pages/privacy-policy/privacy-policy.module').then(mod => mod.PrivacyPolicyModule)
            },
        ]

The website-layout.component.html contains this code:

<div class="app-container">
    <app-navbar>
        <div class="app-content-wrapper"
            <main>
                <router-outlet></router-outlet>
            </main>
            <footer>
                <app-footer></app-footer>
            </footer>
        </div>
    </app-navbar>
</div>

And each children loaded at website-layout-routing.module.ts contains the minimal routing configuration possible. For example:

routes: Routes = [
    {
        path: '',
        component: TermsOfUsePageComponent
    }
];

When I enter a page, for example the main page of the web app, the website-layout-routing.module.ts loads with a number of .js files with a prefix of default~, as in the following image:

enter image description here

I believe this is the default page of any module found under website-layout.module.ts. It seems that in my case, the app-routing.module.ts loads all the default pages that are under website-layout-routing.module.ts, even though I'm not on those pages. Here's a callstack for each default~ .js shown in the previous screenshot.

enter image description here

How can I prevent it from happening?

angular9 angular routes
1 Answers

If I understand the code snippets correctly, I would expect that all route components and associated files referenced by WebsiteLayoutModule would be loaded when that module is lazy loaded. It will always load straight off as it's the empty url component in AppRoutingModule

If you also want the child route components to be lazy loaded you'll need to extract them to their own modules and repeat the lazy loading process - although I would suggest setting up a minimal demo to test

user_2710120
Related