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.

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

Answer 2

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.