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?

What you have included in your update is, the other routing module. Can you add the ProspectModule — Dulanjaya Tennekoon
– Dulanjaya Tennekoon, Commented Mar 15, 2019 at 6:41
It seems like everything fine. But there was a concern in the import RouterModule.forRoot(routes) in Angular 4 where chunks do not appear. I am still not sure whether that is the problem — Dulanjaya Tennekoon
– Dulanjaya Tennekoon, Commented Mar 15, 2019 at 8:35

dfil · Accepted Answer · 2019-03-15 06:32:46Z

2

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

answered Mar 15, 2019 at 6:32

dfil

795 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

davecar21 Over a year ago

I did not use services. What I did is just I follow the step by step instruction in angular docs lazy loading. (angular.io/guide/…

R. Viral · Accepted Answer · 2019-03-15 07:19:41Z

0

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' }
];

answered Mar 15, 2019 at 7:19

R. Viral

3961 silver badge6 bronze badges

Comments

Влад Кискин · Accepted Answer · 2022-04-21 16:59:30Z

0

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

answered Apr 21, 2022 at 16:59

Влад Кискин

154 bronze badges

Collectives™ on Stack Overflow

Lazy Loading, no chunks - Angular 7

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related