I have recently updated to Angular 7.
I am working on Lazy loaded modules but I don't see #chunk.js
anywhere in my network tab when I click the component in the lazy loaded module.
Contact us loads a component lazily but there is no #chunk.js
in the network tab.
Here is how I am loading my module lazily.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactUsComponent } from 'src/app/modules/contactus/contactus.component';
import { ErrorComponent } from 'src/app/modules/error/error.component';
import { ContactUsRoutingModule } from 'src/app/modules/contactus/contactus-routing.module';
import { LandingComponent } from 'src/app/modules/landing/landing.component';
import { AboutUsComponent } from 'src/app/modules/aboutus/aboutus.component';
const routes: Routes = [
{ path: '', redirectTo: 'landing', pathMatch: 'full' },
{ path: 'landing', component: LandingComponent },
{ path: 'aboutus', component: AboutUsComponent },
{ path: 'contactus', loadChildren: './modules/contactus/contactus.module#ContactusModule' },
{ path: '**', component: ErrorComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Am I missing out something or is the file #chunk.js
renamed to some other file?
Clarifying a little bit what Vishwajit Singh said:
There's no chunk.js
for newer versions of Angular (7+). Instead, what Angular loads is a .js file called something like path-to-the-module-modulename-module.js
.
This example here explains it more clearly than the one in the Angular's official website: https://web.dev/route-level-code-splitting-in-angular/
There, the author also shows the files being lazy-loaded.
chunk.js
does not appear in the network tab for the angular.io
.
lazy load example for angular 7.x.
To check if lazy loading is working correctly, navigate to the functionality and verify if the lazy module gets listed in the network tab. However, if you are using preloadingStrategy
, the lazy module will be pre-loaded, so consider removing preloadingStrategy for testing purpose, if you are using one.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With