EXCEPTION: Unprepared (in promise): Error: cannot find module 'app / home / home.module'

Question

I am trying to lazily load Angular 2 modules with a router, and I get this error:

error_handler.js: 50 EXCEPTION: Uncaught (in the promise): Error: cannot find module 'app / home / home.module'

I tried all the answers that seem to work for others, like this one, which seems to be the solution for everyone facing this problem, but does not 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 get it to work on the plunker:

https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview

but still nothing on my car !!!!

UPDATE

I installed the new Ubuntu 16.04 virtual machine and the same problem! it might be something about module versions, I mean the ones on package.json! How to find out which versions are used in the plunker? because it worked there !!!

Answer 1

I managed to get it working, here is what I did:

1 - Make the routing code in the module (and not in the file)

2 - Make a module file in the parent directory of the component

3 - Remove 'default' in an export like this

export DEFAULT class HomeModule { }

has become

export class HomeModule { }

you can see that it works with beta 24 here: https://github.com/mauricedb/lazy-routes

I do not know what's going on!!!

Answer 2

I landed on this question with very similar symptoms and context, so it seems useful to note that this answer to another question helped me.

In my particular case, I followed the lazy function module documents somewhat, and I even tried to accurately reproduce the corresponding StackBlitz code example . For some reason, this example goes away with:

 loadChildren: 'app/customers/customers.module#CustomersModule' 

And although my experiment with Angular CLI (v6) had a similar folder structure, I needed to do the following:

 // Full path including 'src' at the start: loadChildren: 'src/app/customers/customers.module#CustomersModule' 

or that:

 // Relative path from the 'app-routing.module.ts' file: loadChildren: './customers/customers.module#CustomersModule' 

I don't know why the StackBlitz example leaves with the first code example, but the other two make sense and work for me when they do ng serve .

Answer 3

It seems that the angular-cli tool has lazy loading issues when you use the export default class SomeModule { } ... along with a few other nuances.

This is what I did to solve the same “Error: I can not find the module ...” I started deploying Heroku:

• Fix all loadChildren paths from application root and enable hash for your module name
  • loadChildren: 'app/main/some-module/some-module.module#SomeModule'
• Change export default class SomeModule { } to export class SomeModule { }

Answer 4

For me, I had to use the Module Map NgFactory Loader, which you can do:

 npm install @nguniversal/module-map-ngfactory-loader --save 

then add module-map-ngfactory-loader to your server module:

 import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader'; @NgModule({ imports: [ AppModule, ServerModule, ModuleMapLoaderModule ], bootstrap: [AppComponent], }) export class AppServerModule {} 

Answer 5

Also take care of the following in the app-routing.module.ts file, i.e.

const route: Routes = [{path: 'login', loadChildren: './login/login.module # L oginModule'}, {path: 'registration', loadChildren: './registration/registration.module # R egistrationModule' }];

bold letters must be uppercase

Answer 6

Angular CLI: 6.1.5 Node: 8.11.3 OS: win32 x64 Angular: 6.1.6

Answer 7

No matter how stupid it sounds, on Angular 6.

I used this ng build --aot --watch when developing my application. Having somehow got into the zone, I saved a lot of files (copy and paste from some other projects). The assembly worked, but showed no errors, but the browser showed this error.

I closed the assembly and restored it again, and all errors (not related to the above) that were not shown were detected !!