Angular2 cannot find a nested module

Question

I'm working on a web app with two top level modules and several modules under each. Example:

public
- registration
- login
portal
- dashboard
- results
- appointments

Each of the nested modules has one or more potential routes, services and components. The public and portal modules also have different layout requirements.

What I would like to do is break my code up into modules for each main section above. However, when I attempt to load a module as a child of another route, I get an error stating the module can't be found:

error_handler.js:46
EXCEPTION: Uncaught (in promise): Error: Cannot find module './dashboard/dashboard.module'.

Here are my routing files:

/app/app.routing.ts

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

export const appRouting: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'portal',
    loadChildren: 'portal/portal.module#PortalModule'
  },
  {
    path: '',
    loadChildren: 'public/public.module#PublicModule'
  }
]);


/app/portal/portal.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PortalComponent } from './portal.component';

export const portalRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    component: PortalComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      }
    ]
  }
]);

The "dashboard" module lives at: /app/portal/dashboard/dashboard.module.ts, but no matter what I set the module path to in loadChildren, it can't seem to find it.

What am I doing wrong? I am using WebPack instead of SystemJS.

I don't think the problem come from here, but your portalRouting main path should be an empty path, since 'portal' is already conf in the appRouting — Noémi Salaün, Sep 26 '16 at 14:26
@NoémiSalaün Sorry, that's just a copy/paste artifact. I've removed the redundant path from the example, but you're correct in that it doesn't affect the functionality. I get the same error. — Brandon Taylor, Sep 26 '16 at 15:05
Looks like using the es6-promise loader in this example works using webpack: http://stackoverflow.com/questions/39492299/error-when-trying-to-lazy-load-feature-modules-using-angular-cli-with-webpack — Brandon Taylor, Sep 26 '16 at 15:11
Thanks for solving this problem. I just encountered it and I was extremely frustrated. How did you come up thinking of using the es6-promise-loader? — Hristo Georgiev, Oct 30 '16 at 19:12

score 1 · Answer 1 · answered Sep 26 '16 at 15:34

1

The correct path for the dashboard module will be app/portal/dashboard/dashboard.module.

For some reason webpack needs the absolute path in this case. Don't forget to restart the server after changing the path.

answered Sep 26 '16 at 15:34

Alexander Ciesielski

10,506
5
45
66

I've tried this approach and got the same result. However, if I use the es6-promise loader, it will work as expected. – Brandon Taylor Sep 26 '16 at 15:39
Did you restart the server? In my case it only worked after that. – Alexander Ciesielski Sep 26 '16 at 15:43
Yes, and I still got the same result. – Brandon Taylor Sep 26 '16 at 16:18
absolute path resolved for me. I guess in module registering the app structure only scrapes first level resources. – Elysiumplain Mar 20 '19 at 16:42

score 1 · Accepted Answer · answered Sep 26 '16 at 15:44

Using the es6-promise loader seems to be working for me so far. Here's my routers to this point...

app/app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const appRouting: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'portal',
    loadChildren: () => require('es6-promise!./portal/portal.module')('PortalModule')
  },
  {
    path: '',
    loadChildren: () => require('es6-promise!./public/public.module')('PublicModule')
  }
]);

app/portal/portal.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PortalComponent } from './portal.component';

export const portalRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: () => require('es6-promise!./dashboard/dashboard.module')('DashboardModule')
      },
      {
        path: 'results',
        loadChildren: () => require('es6-promise!./results/results.module')('ResultsModule')
      }
    ]
  }
]);

app/portal/dashboard/dashboard.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    component: DashboardComponent
  }
]);

and I'm seeing the correct output of my <router-outlet> tags.

Angular2 cannot find a nested module

2 Answers2