EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'

Question

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.

Remove HomeModule from declarations and replace it with HomeComponent — Igor Janković, Dec 30 '16 at 13:16
thank you! i missed this one, but still the same issue after kill ng serve !!! — Sid Ali, Dec 30 '16 at 13:26
Not sure what this export DEFAULT class means. Try removing default. — Igor Janković, Dec 30 '16 at 13:31

score 68 · Answer 1 · answered Apr 07 '20 at 13:18

68

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) }

answered Apr 07 '20 at 13:18

Youssef

2,866
1
24
20

I have a somewhat similar problem. I want to import a module dynamically, but outside of the router context. So it's just `import('src/some.module').then(m => do_something(m)) ` which works fine. However, to make this truly dynamic, I need to use a variable inside of import(), like `let path = 'src/some.module'; import(path).then(m => do_something(m))` but with that I am getting the error `Uncaught (in promise): Error: Cannot find module 'src/some.module' at elements lazy namespace object:5 at ZoneDelegate.push..` seems like zone has problems with that. How can I make that work? – yogibimbi Jul 21 '20 at 12:17
just as an added info: I installed the zone.js patch `import 'zone.js/dist/zone-patch-rxjs';`and ran all the above code inside of `this.ngZone.runOutsideAngular(() => {...})` to move it outside of the ngZone, still the error message remains the same. – yogibimbi Jul 21 '20 at 14:48
3

I had a similar issue, but in order to use the syntax above, I ALSO had to change the module setting in tsconfig.json to es2020. (It was es2015). – woodge Feb 09 '21 at 20:26

score 19 · Answer 2 · edited Jun 12 '20 at 10:44

19

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) }
];

edited Jun 12 '20 at 10:44

Saravanan Sachi

2,572
5
33
42

answered Mar 11 '20 at 11:24

Arnur Kuatov

193
3
5

score 15 · Answer 3 · answered Jul 05 '18 at 20:49

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.

score 7 · Answer 4 · answered Jan 21 '17 at 14:07

7

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 { } to export class SomeModule { }

answered Jan 21 '17 at 14:07

dustintheweb

247
1
13

2

Yeah you are right in specifying a particular module using # annotation but is there documentation for it I'm not able to find it out – Black Mamba Jan 13 '18 at 15:22
I've had same issue, change relative path to absolute resolved that – lyolikaa Jan 22 '19 at 10:03

score 5 · Answer 5 · edited Apr 05 '20 at 15:03

5

Use it like this

{
  path : 'company', 
  loadChildren: () => import('./company/company.module').then(m => m.CompanyModule)
},

edited Apr 05 '20 at 15:03

j3ff

5,719
8
38
51

answered Apr 05 '20 at 12:58

amanverma

51
1
2

score 2 · Accepted Answer · edited Jan 11 '18 at 10:03

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 !!!

score 2 · Answer 7 · edited Apr 05 '20 at 17:28

For me I had to use Module Map NgFactory Loader 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 {}

score 1 · Answer 8 · answered Jun 23 '19 at 08:04

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

const routes: Routes = [ {path:'login',loadChildren:'./login/login.module#LoginModule'}, {path:'registration',loadChildren:'./registration/registration.module#RegistrationModule'} ];

in above the bold letters should be in capital

score 0 · Answer 9 · edited Sep 02 '19 at 09:51

0

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

edited Sep 02 '19 at 09:51

Community

1
1

answered Sep 04 '18 at 06:41

Vishal

273
1
4
14

score 0 · Answer 10 · answered Nov 15 '18 at 14:41

0

As silly as it sounds, on Angular 6.

I was using this command ng build --aot --watch while developing my application. Somehow getting in to the zone I saved a lot of files (copy paste from some other projects). The build did work but was not showing errors but browser showed this error.

I closed the build, & rebuilt it again & all the errors(unrelated to the above) which were not being shown showed up!!.

answered Nov 15 '18 at 14:41

Abdul Rehman Sayed

6,532
7
45
74

I witnesses similar flakiness in Angular 8. I was able to poke the error away by removing the entry from the `app-routing.module.ts` and saving it, then adding the entry again and saving the routing module again. – Mike Poole Feb 25 '20 at 15:58

score 0 · Answer 11 · answered Mar 03 '20 at 08:28

0

All I required was to restart the server, something to do with the bundling I guess.

npm start

or

ng serve

Look at another StackOverflow link describing the same.

answered Mar 03 '20 at 08:28

stayingcool

2,324
1
21
24

score 0 · Answer 12 · answered Mar 04 '21 at 15:51

0

I was having problems although it was like the answer here https://stackoverflow.com/a/51199693/5621221 and solved it by adding the providers: [] in home.module file.

answered Mar 04 '21 at 15:51

roxhens

508
6
22

EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'

12 Answers12

Linked