Cannot find module error while Lazy loading

Question

I want to setup lazy loading for my modules, but there is an error I can't solve.

The error is:

core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/invoice-builder/invoice-builder.module' Error: Cannot find module 'app/invoice-builder/invoice-builder.module'

app-routing.module.ts

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

const routes: Routes = [
  {
    path: 'invoice-builder',
    loadChildren : 'app/invoice-builder/invoice-builder.module#InvoiceBuilderModule'
  },
  {
    path: '**',
    redirectTo: 'invoice-builder'
  }
];

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

app.module.ts

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

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

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { from } from 'rxjs';
import { MaterialModule } from './shared/material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I can't understand what happen in here. I tried twice to restart the project using npm start but, that did not work. Any help would be much appreciated.

yes i tried using ./app/invoice-builder/invoice-builder.module#InvoiceBuilderModule but not success — ruwan liyanage
– ruwan liyanage, Commented Apr 10, 2019 at 14:57
yes i added component into declaration as you told , but nothing happen — ruwan liyanage
– ruwan liyanage, Commented Apr 10, 2019 at 14:59

johannesMatevosyan · Accepted Answer · 2020-03-17 09:29:28Z

6

I had a similar issue when worked with Angular 9 and managed to fixed it by using this syntax that found in docs:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

answered Mar 17, 2020 at 9:29

johannesMatevosyan

2,3082 gold badges39 silver badges44 bronze badges

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

1 Comment

Pedro Ferreira Over a year ago

Your correct! They´ve breakdown Angular on Ng11... You have to go the 'old days'

Narm · Accepted Answer · 2019-04-10 14:56:49Z

3

The issue is probably due to the way you defined your path.

From the official angular docs on Lazy Loading Modules

Notice that the lazy loading syntax uses loadChildren followed by a string that is the relative path to the module, a hash mark or #, and the module’s class name.

Try updating your path to:

loadChildren : './app/invoice-builder/invoice-builder.module#InvoiceBuilderModule'

or depending on your file structure you may not need the ./app in which case you could try

loadChildren : './invoice-builder/invoice-builder.module#InvoiceBuilderModule'

answered Apr 10, 2019 at 14:56

Narm

10.9k5 gold badges46 silver badges60 bronze badges

1 Comment

ruwan liyanage Over a year ago

I modified the code as you told (loadChildren : './invoice-builder/invoice-builder.module#InvoiceBuilderModule'), afterward console errors are disappear. but there is no any output . output shold be " invoice-builder works!"

N.Balgopal Patro · Accepted Answer · 2020-02-05 17:00:04Z

0

Update the LoadChieldren path like ,

loadChildren : './invoice-builder/invoice-builder.module#InvoiceBuilderModule'

Because the invoice-builder folder is inside the app folder. And the app-routing.module.ts is also in the same directory so update the path of module.

answered Feb 5, 2020 at 17:00

N.Balgopal Patro

1952 silver badges4 bronze badges

Collectives™ on Stack Overflow

Cannot find module error while Lazy loading

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related