Angular2 lazy loading module error 'cannot find module'
AngularModuleLazy LoadingAngular Problem Overview
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
Angular Solutions
Solution 1 - Angular
restarting ng serve
worked for me
Solution 2 - Angular
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
).
Solution 3 - Angular
I have faced this same issue. I solved it by doing following 2 things:
In root module's route configuration, use loadChildren
with a relative path to the lazy loaded angular module. The string is delimited with a # where the right side of split is the lazy loaded module's class name.
I have added ./ as prefix to the loadChildren
string.
{ path:'user', loadChildren:'./app/user/user.module#UserModule'}
I am using webpack 2 and it needs a loader for Angular 2 that enables string-based module loading with the Angular Router. Add this to the project
yarn add angular-router-loader -D
then add the angular-router-loader
to typescript loaders
loaders: [
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-router-loader'
]
}
]
and its working for me.
Solution 4 - Angular
For people who are using a recent Angular version (v9 in my case), you can setup your route with the following syntax declaration:
import { TestModule } from './modules/test.module';
const appRoutes: Routes = [
{ path: 'blogs', loadChildren: () => import('./modules/test.module').then(m => m.TestModule) },
];
// NgModule
// declarations
// imports
// providers
// bootstrap
export class AppModule { }
Another way (without making the import at the top):
const appRoutes: Routes = [
{ path: 'blogs', loadChildren: () => import('./modules/test.module').then(m => m.TestModule) },
];
Solution 5 - Angular
Finally I found out that I need to import lazy loaded module in routing config this way:
const routes: Routes = [
{ path: '', loadChildren: 'app/test.module' }
];
without any /
or ./
in front of module path.
Solution 6 - Angular
In Angular 9 I did this and it worked for me:
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
You can have a look on official documentation
Solution 7 - Angular
I change this
{
path: 'test',
loadChildren: 'app/tests/test.module#TestModule'
}
for this
{
path: 'test', loadChildren: () => new Promise(resolve => {
(require as any).ensure([], require => {
resolve(require('app/tests/test.module').TestModule);
})
})
},
And solved my problem.
Solution 8 - Angular
> 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.)
Solution 9 - Angular
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'
.
Solution 10 - Angular
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.
Solution 11 - Angular
make sure to include import { Routes, RouterModule } from '@angular/router'; in the module to load lazely
Solution 12 - Angular
I had a similar issue. I just restarted the server and it worked. :)
Solution 13 - Angular
I have solved my own issue. Don't put the .ts
in the path name. Rather than using 'path/to/my/module.ts#MyModuleClass'
, use 'path/to/my/module#MyModuleClass'
Solution 14 - Angular
In my case the path shared the same route as one I declared elsewhere, assuming they would be relative paths. e.g like below in the
Not Working
Admin Module
{
path: 'organisation',
canActivate: [AuthGuard],
loadChildren: './organisation/organisation.module#AdminOrganisationModule',
},
User Module
{
path: 'organisation',
canActivate: [AuthGuard],
loadChildren: './organisation/organisation.module#UserOrganisationModule',
},
individually, when only one was declared, these were working fine, but not together as it complained about the ./organisation/organisation.module path , I changed both to the pattern below and it was ok.
Working
Admin Module
{
path: 'organisation',
canActivate: [AuthGuard],
loadChildren: '../admin/organisation/organisation.module#AdminOrganisationModule',
},
User Module
{
path: 'organisation',
canActivate: [AuthGuard],
loadChildren: '../user/organisation/organisation.module#UserOrganisationModule',
},
Solution 15 - Angular
You need to change
export default class TestModule { }
to
export class TestModule { }
That should fix your problems