Angular2 lazy loading module error 'cannot find module'

Question

I was trying to find any solution for this error but nothing works for me. I have simple Angular2 App created with Angular-CLI. When I serve this app in browser I'm getting this error: EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'. I was trying using different path in loadChildren:

'/app/test.module' './app/test.module' './test.module' '/src/app/test.module' 

Folders

src/   app/     app-routing.module.ts     app.component.ts     app.module.ts     test.component.ts     test.module.ts 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http';  import { RoutingModule } from './app-routing.module';  import { AppComponent } from './app.component';  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     FormsModule,     HttpModule,     RoutingModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { } 

app-routing.module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';   const routes: Routes = [   { path: '', loadChildren: '/app/test.module' } ];  @NgModule({   imports: [RouterModule.forRoot(routes)],   exports: [RouterModule],   providers: [] }) export class RoutingModule { } 

test.module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { TestComponent } from './test.component';  export const routes: Routes = [     { path: '', component: TestComponent } ];  @NgModule({   imports: [     CommonModule,     RouterModule.forChild(routes)   ],   exports: [TestComponent],   declarations: [TestComponent] }) export default class TestModule { } 

stack trace

        error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Cannot find module '/app/test.module'.ErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386     2016-10-08 14:22:50.612 error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386     2016-10-08 14:22:50.613 error_handler.js:51Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.         at resolvePromise (zone.js:429)         at zone.js:406         at ZoneDelegate.invoke (zone.js:203)         at Object.onInvoke (ng_zone_impl.js:43)         at ZoneDelegate.invoke (zone.js:202)         at Zone.run (zone.js:96)         at zone.js:462         at ZoneDelegate.invokeTask (zone.js:236)         at Object.onInvokeTask (ng_zone_impl.js:34)         at ZoneDelegate.invokeTask (zone.js:235)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386     2016-10-08 14:22:50.614 zone.js:355Unhandled Promise rejection: Cannot find module '/app/test.module'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module '/app/test.module'.(…) Error: Cannot find module '/app/test.module'.         at webpackEmptyContext (http://localhost:4200/main.bundle.js:49550:8)         at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/main.bundle.js:57952:40)         at SystemJsNgModuleLoader.load (http://localhost:4200/main.bundle.js:57945:60)         at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:22354:128)         at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:22346:81)         at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:61105:111)         at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:32515:27)         at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:32505:18)         at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:7085:18)         at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:48555:24)consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386     2016-10-08 14:22:50.620 zone.js:357Error: Uncaught (in promise): Error: Cannot find module '/app/test.module'.(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386 

Answer 1

restarting ng serve worked for me

Answer 2

For newer Angular versions (10+?) lazy loading is done using the following syntax:

{ path: "foos", loadChildren: () => import ("./foos/foo.module").then(m => m.FooModule) }, 

---

I met a similar issue when working with Angular 4.4.5 and webpack and managed to fix it without using strings, but module type reference (much easier to write and less error prone):

const routes: Routes = [   { path: '', loadChildren: () => TestModule } ]; 

I could not find the minimum version for Angular (loader) the supports this syntax.

---

A way that might work with AOT is to replace lambda syntax with a regular one:

export function getTestModule() { return TestModule; }  const routes: Routes = [   { path: '', loadChildren: getTestModule } ]; 

---

Also check this issue (thanks to rey_coder).