chunk.js not loaded in Angular 7

user_3094731 0
Viewed 4680

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.

enter image description here

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?

angular7 angular typescript lazy-loading
2 Answers

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.

user_67848690

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.

user_63031480
Related