Angular2 lazy loading module error 'cannot fin

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

In a use-case scenario to segregate a distinct feature (e.g. test.module.ts) from its root application (i.e. app.module.ts) through a lazily-loaded module, we could create the test module and it's components in a sub-folder (e.g. src/app/test/). The test-routing.module could be configured this way:

//test-routing.module.ts
//routes to test.component.ts as an example

import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';

const feature_test_routes: Routes = [

    { 
        path: '',
        component: TestComponent
    }

];

export const TestRoutingModule = RouterModule.forChild(feature_test_routes);

The "parent" module (app-routing.module.ts), would have a route that looks like this:

//app-routing.module.ts
//routes to http://localhost:4200/test

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const root_routes: Routes = [

    { 
        path: '',
        component: AppComponent, 
        children: [
            {
                path: 'test',
                loadChildren: './test/test.module#TestModule'
            }
        ]
    }

];

export const AppRoutingModule = RouterModule.forChild(root_routes);

This allows the root application and entry component, imperatively loaded, to subsequently lazy-load features from test.module.ts as a child when needed.

Answer 2

It was worked for me by using.

../app/

I solved this issue by using the suggestion popup in VS code. You can also follow that. No need to go anywhere. (I Think, the path may vary in every project.)

Answer 3

make sure to include import { Routes, RouterModule } from '@angular/router'; in the module to load lazely

Answer 4

I had a similar issue. I just restarted the server and it worked. :)

Answer 5

I've been troubleshooting this for a a couple of hours on a project I've just taken over from. None of the above solutions were working, but then I realised that all the lazy-loaded modules had the .ts extension.

If anyone else is having issues, check if you need to change loadChildren: 'app/example.module.ts' to loadChildren: 'app/example.module'.