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: C

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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