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
– Noémi Salaün, Commented Sep 26, 2016 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
– Brandon Taylor, Commented Sep 26, 2016 at 15:05
Looks like using the es6-promise loader in this example works using webpack: stackoverflow.com/questions/39492299/… — Brandon Taylor
– Brandon Taylor, Commented Sep 26, 2016 at 15:11

Alexander Ciesielski · Accepted Answer · 2016-09-26 15:34:41Z

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, 2016 at 15:34

Alexander Ciesielski

10.8k5 gold badges48 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brandon Taylor Over a year ago

I've tried this approach and got the same result. However, if I use the es6-promise loader, it will work as expected.

Alexander Ciesielski Over a year ago

Did you restart the server? In my case it only worked after that.

Brandon Taylor Over a year ago

Yes, and I still got the same result.

Elysiumplain Over a year ago

absolute path resolved for me. I guess in module registering the app structure only scrapes first level resources.

Brandon Taylor · Accepted Answer · 2016-09-26 15:44:58Z

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.

Collectives™ on Stack Overflow

Angular2 cannot find a nested module

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related