CODEWITHSUNDEEP
angularangular-routingangular-module
ruwan liyanage
ruwan liyanage

Reputation: 451

Cannot find module error while Lazy loading

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.

Upvotes: 2

Views: 3273

Answers (3)

johannesMatevosyan
johannesMatevosyan

Reputation: 2208

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

Upvotes: 6

N.Balgopal Patro
N.Balgopal Patro

Reputation: 185

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.

Upvotes: 0

Narm
Narm

Reputation: 10844

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'

Upvotes: 3

Related Questions