角度延迟加载 - 看不到它在工作

Question

I defined a lazy loading module.

this is SettingsRoutingModule module-

 const routes: Routes = [
        {
            path: '',
            component: SettingsStandaloneComponent,
            children: [
                {
                    path: '',
                    redirectTo: 'profile',
                    pathMatch: 'full'
                },
                {
                    path: 'profile',
                    component: SettingsProfileComponent
                },
                {
                    path: 'about',
                    component: SettingsAboutComponent
                },
                {
                    path: 'affiliations',
                    component: SettingsAffiliationsComponent
                },
                {
                    path: 'communication',
                    component: SettingsCommunicationComponent
                },
                {
                    path: 'notifications',
                    component: SettingsNotificationsComponent
                },
                {
                    path: 'proxies',
                    component: SettingsProxiesComponent
                },
                {
                    path: '**',
                    redirectTo: 'profile',
                    pathMatch: 'full'
                }
            ]
        }
    ];

    @NgModule({
        imports: [RouterModule.forChild(routes)],
        exports: [RouterModule]
    })
    export class SettingsRoutingModule { }

in the AppRoutingModule module-

{ path: 'settings',
    loadChildren: './settings/settings.module#SettingsModule',
    canActivate: [AuthGuard],
},

in the prod production when a go to the network I don't see the "chunk.js" that everybody say that should appear". only two files that looks like- 0.34016a93d44e785b623a.js

In my localhost I see only "settings-settings-module.js"

Is it OK or does it mean that my module isn't lazy?

Answer 1

Because of this option "namedChunks": false in your angular.json, you won't see the named chunks anymore, instead it displays hashed-value as the file name. This is due to recent improvements(not sure from when) in angular/cli.

Answer 2

Yes it is OK, We do not see chunk.js anymore. A lazy loaded module appears with its name in network tab as mentioned by you and it appears only once for the first time. To see it again, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:

Answer 3

Make sure you're not filtering anything in Chrome Debugging tools in Network tab, it was driving me insane for a moment, I had everything set up perfectly.

Proof (I had 'fa' being filtered, that's why I couldn't see )

After