CODEWITHSUNDEEP
javascriptangulartypescriptlazy-loading
danda
danda

Reputation: 583

Angular lazy loading - don't see it is working

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?

Upvotes: 2

Views: 4043

Answers (3)

Marius Mihail
Marius Mihail

Reputation: 449

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 ) Proof (I had 'fa' being filtered, that's why I couldn't see )

After After

Upvotes: 0

Kishori
Kishori

Reputation: 1095

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:

Lazy loaded module

Upvotes: 3

KiraAG
KiraAG

Reputation: 783

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.

Upvotes: 13

Related Questions