Angular7: Lazy loading not creating chunks

Question

I am using Angular7 and I am using the new syntax i.e. loadChildren for lazy loading modules. But When I serve my App and check in browser I see it does not create any chunks.

Below is my App-routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './layout/layout.module#LayoutModule' },
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
  { path: '**', redirectTo: 'not-found' }
];

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

Below is my App module i

mport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// imports for internationalization i18n
import { HttpClientModule } from '@angular/common/http';
import { LanguageTranslationModule } from './language-translation/language-translation.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    LanguageTranslationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

As shown chunks are indeed created.

And not found module isn't appearing which is normal.

Answer 2

Why would you create a layout module lazy loaded? Isn't the whole idea of lazy loading feature modules to show first page rapidly to the user while preloading or loading the other feature modules in background or when requested?

If you have a layout module, right from the start you have at least 3 requests at once: 1 for your app, one for layout, and most probably one for pages to be rendered inside layout.

You might improve the performance to build an eager loaded module layout, added in AppModule, then use lazy-loading feature modules to route components inside layout. Also, home page should be included in AppModule for fast rendering to not wait for the lazy-loading module to be downloaded by the browser to be rendered.

BTW: I've seen that if I'm using a component exported by a feature module inside AppModule, or in a component included in AppModule, then that feature module won't have its own chunk file. Each lazy loading feature module should be self contained and should not export components to other modules. If you do that that, you might need to break your modules even more to be able to be share some components / providers between modules.

Also, be careful sharing providers between feature modules, cause you have child injectors and you would end up with multiple singleton instances, one per feature module. To share providers you should implement .forRoot and .forChild in your shared modules.