Lazy Loading, no chunks - Angular 7

Question

I'm trying to do Lazy Loading, and followed the steps in the official docs of angular. The problem is that there is no chunks that is showing.

Is there any steps that I forgot that causing this?

App Routing

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

const routes: Routes = [
  {
    path: 'prospect',
    loadChildren: './prospect/prospect.module#ProspectModule'
  },
  {
    path: 'customer',
    loadChildren: './customer/customer.module#CustomerModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
  // { path: '**', redirectTo: '/error-404' }
];

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

prospect Routing

import { NgModule } from '@angular/core';

import { ProspectComponent } from './prospect.component';

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

const routes: Routes = [
  {
    path: '',
    component: ProspectComponent
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

prospect Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CustomerRoutingModule } from './customer-routing.module';

import { CustomerComponent } from './customer.component';



@NgModule({
  imports: [
    CommonModule,
    CustomerRoutingModule
  ],
  declarations: [CustomerComponent],
})
export class CustomerModule { }

customer Routing

import { NgModule } from '@angular/core';

import { CustomerComponent } from './customer.component';

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

const routes: Routes = [
  {
    path: '',
    component: CustomerComponent
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

customer Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProspectRoutingModule } from './prospect-routing.module';

import { ProspectComponent } from './prospect.component';

@NgModule({
  imports: [
    CommonModule,
    ProspectRoutingModule
  ],
  declarations: [ProspectComponent]
})
export class ProspectModule { }

I notice that it produces chunk when I do ng serve.

Did I implement Lazy loding correctly?

Answer 1

do you use services from lazy loading module in your app? If you don't use a shared module you can break lazy loading.

Answer 2

i change in your App routing's route const, please this...

const routes: Routes = [    
{
  path: '',
  redirectTo: 'prospect',
  pathMatch: 'full'
},
{
   path: 'prospect',
   loadChildren: './prospect/prospect.module#ProspectModule'
},
{
   path: 'customer',
   loadChildren: './customer/customer.module#CustomerModule'
},
// { path: '**', redirectTo: '/error-404' }
];

Answer 3

Make sure you don't use "module": "commonjs" in tsconfig.json compilerOptions section. Try "module": "esnext"