Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

chunk.js not loaded in Angular 7

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?

like image 608
Abdullah Khan Avatar asked Oct 29 '18 05:10

Abdullah Khan


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.

like image 83
vamcs Avatar answered Oct 13 '22 21:10

vamcs


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.

like image 30
Vishwajit Singh Avatar answered Oct 13 '22 19:10

Vishwajit Singh