Getting error Cannot find module 'app/dashboard/first/first.module'

Question

I am getting a weird error. I am developing angular 4 based project. Following in my code structure

app
app.component.html
app.component.ts
app.module.ts
app.routing.module.ts
- dashboard
- dashboard.component.html
- dashboard.component.ts
- dashboard.module.ts
- dashboard.routing.module.ts
  - first
  - first.component.html
  - first.component.ts
  - first.module.ts
  - first.routing.module.ts

When I try to load first from dashboard, I get following error.

    ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/dashboard/first/first.module'.
Error: Cannot find module 'app/dashboard/first/first.module'.
    at webpackAsyncContext (src async:14)
    at SystemJsNgModuleLoader.webpackJsonp.../../../core/@angular/core.es5.js.SystemJsNgModuleLoader.loadAndCompile (core.es5.js:5644)
    at SystemJsNgModuleLoader.webpackJsonp.../../../core/@angular/core.es5.js.SystemJsNgModuleLoader.load (core.es5.js:5632)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.loadModuleFactory (router.es5.js:3417)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.load (router.es5.js:3401)
    at MergeMapSubscriber.project (router.es5.js:1569)

Following is my app.routing.module code

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
     { path: '', loadChildren: 'app/login/login.module' },
    { path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module' },

];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

At compile time there is no error. However when I add a space in dashboard.routing.module.ts and save the file, the error goes away and the routing works perfectly. It runs smoothly till I restart node server.

show the code app.routing.module.ts file , how your are setting lazy load paths? — Sathish Kotha, Aug 03 '17 at 12:02
I have edited my question and added app.routing.module code. — mandar, Aug 03 '17 at 12:11
where is the first module loadchildren path in the app.routing.module.ts file? — Sathish Kotha, Aug 03 '17 at 13:47
check this https://stackoverflow.com/questions/41833580/how-to-give-correct-path-names-for-loadchildren-in-lazy-loading-angular-2-ngmodu — Sathish Kotha, Aug 03 '17 at 13:50
Thanks Sathish. The link helped me to solve the problem. I revisited all the modules and removed default from 'export default class AppRoutingModule { }'. I had some other modules which was having default was causing the problem. — mandar, Aug 05 '17 at 07:02

score 0 · Answer 1 · answered Aug 03 '17 at 14:31

Try to change the code like this.

   const routes: Routes = [
                    { path: '', loadChildren: 'app/login/login.module#loginModule'},
                    { path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#dashboardModule' },     
                    { path: 'dashboard/first',loadChildren:'app/dashboard/first.module#firstModule'}
                 ];
               @NgModule({
                    imports: [RouterModule.forRoot(routes)],
                    exports: [RouterModule]
           })
        export class AppRoutingModule { }

see more on loadChildren info Loadchildren concept

Getting error Cannot find module 'app/dashboard/first/first.module'

1 Answers1