EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'
Solution 1
I managed to make it work, here is what I done :
1 - Make the routing code in the module ( not a file )
2 - Make the module file in the parent directory of the component
3 - Delete the 'default' in the export like this
export DEFAULT class HomeModule { }
became
export class HomeModule { }
you can see that it works with beta 24 here : https://github.com/mauricedb/lazy-routes
I don't know what is happening !!!
Solution 2
For Angular 8 and 9, the lazy load declaration changed. Since Angular 8 introduced the new recommended module loading method, previously the default method of lazy loading modules was to specify a string path to a module:
{ path: 'auth', loadChildren: 'src/app/auth/auth.module#AuthModule' }
The method of importing modules has changed to dynamic import. The dynamic import is promise-based and gives you access to the module, where the module’s class can be called. Thus your import should now be changed to:
{ path: 'auth', loadChildren: () => import('src/app/auth/auth.module').then(m => m.AuthModule) }
Solution 3
You need to change your app-routing.module.ts in
import { RouterModule } from '@angular/router';
const routes = [
{path : '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
{path: 'devis', loadChildren: () => import('./forms/forms.module').then(m => m.FormsModule) }
];
Solution 4
I landed on this question with very similar symptoms and context, so it seems useful to remark that this answer to another question helped me out.
In my specific case, I was somewhat following the lazy feature modules docs, and I even faithfully tried to replicate the associated StackBlitz example code. For some reason that example gets away with:
loadChildren: 'app/customers/customers.module#CustomersModule'
And even though my Angular CLI (v6) based experiment had similar folder structure, I needed to do either this:
// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'
or this:
// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'
No clue why the StackBlitz example gets away with the first code example, but the other two both make sense and work for me when doing ng serve
.
Solution 5
It seems that the angular-cli renderer has problems with lazy loading when you use export default class SomeModule { }
...along with a few other nuances.
This is what I did to resolve the same "Error: Cannot find module..." I was getting on Heroku deployment:
- Source all loadChildren paths from the app root & include a hash for your module name
loadChildren: 'app/main/some-module/some-module.module#SomeModule'
- Change
export default class SomeModule { }
toexport class SomeModule { }
Sid Ali
full stack web developer, founder and owner of yet.marketing
Updated on March 05, 2021Comments
-
Sid Ali about 3 years
I'm trying to lazy load Angular 2 modules with the router, and I'm having this error:
error_handler.js:50 EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'
I tried all the answers that seems to be working for the others, like this one which seems to be a solution for everybody facing this issue, but doesn't work with me Lazy loading in Angular2 RC7 and angular-cli webpack
here is my code:app.module
import { MediatorService } from './home/mediator.service'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import appRoutes from "./app.routes"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, appRoutes ], providers: [MediatorService], bootstrap: [AppComponent] }) export class AppModule { }
app.routes
import { RouterModule } from '@angular/router'; const routes = [ {path : '', loadChildren: './home/home.module#HomeModule'}, {path: 'devis', loadChildren: './forms/forms.module#FormsModule'} ]; export default RouterModule.forRoot(routes);
home.module
import {NgModule} from "@angular/core"; import {CommonModule} from "@angular/common"; import homeRoutes from "./home.routes"; @NgModule({ imports:[CommonModule, homeRoutes], declarations: [HomeComponent] }) export default class HomeModule{}
home.routes
import {RouterModule} from "@angular/router"; import {HomeComponent} from "./home.component"; const routes = [ {path: '', component: HomeComponent} ]; export default RouterModule.forChild(routes);
Package.json
{ "name": "insurance", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "^2.3.1", "@angular/compiler": "^2.3.1", "@angular/core": "^2.3.1", "@angular/forms": "^2.3.1", "@angular/http": "^2.3.1", "@angular/platform-browser": "^2.3.1", "@angular/platform-browser-dynamic": "^2.3.1", "@angular/router": "^3.3.1", "bootstrap": "^4.0.0-alpha.5", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/compiler-cli": "^2.3.1", "@types/jasmine": "2.5.38", "@types/jquery": "^2.0.34", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.0.2", "typescript": "~2.0.3" } }
UPDATE
I managed to make it work on plunker
https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview
but still nothing on my machine !!!!
UPDATE
I installed a new virtual machine ubuntu 16.04 and I have the same problem! Could it be because of the versions of the modules, I mean those on package.json? How can I find out the versions used in plunker because it worked on there.