Angular 2 - Cannot find module in nested routes

Question

I try to use Lazyload routes but nested. But i still get the error that it do not find the module in the 2 level route.

Here is my construct:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routes';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    AuthComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routes.ts

import { Router, RouterModule} from '@angular/router';
import { AuthGuard } from './Auth/Services/auth-guard.service';
import { AuthComponent } from './Auth/auth.component';

export const routing = RouterModule.forRoot([
    { path: '', redirectTo: "portal", pathMatch: 'full'},
    { path: 'portal', loadChildren: './Portal/portal.module#PortalModule'},
    { path: '**', redirectTo: "portal"}
])

Portal/portal.module.ts:

import { NgModule } from '@angular/core';
import { routing } from './portal.routes';
import { PortalComponent } from './portal.component';
import { FormsModule,ReactiveFormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    routing
  ],
  exports: [ RouterModule ],
  declarations: [
    PortalComponent
  ],
  providers: [
  ]
})
export class PortalModule { }

Portal/portal.routes.ts:

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

export const routing = RouterModule.forChild([
    { path: '', redirectTo: "reports"},
    // This Part doesn't work 
    { path: 'reports', component: PortalComponent, loadChildren: './Portal/Test/test.module#TestModule'},
    // --
    { path: '**',component: PortalComponent, pathMatch: 'full'}
])

Portal/Test/test.module.ts:

import { NgModule } from '@angular/core';
import { routing } from './test.routes';
import { TestComponent } from './test.component';
import { FormsModule,ReactiveFormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    routing
  ],
  exports: [ RouterModule ],
  declarations: [
    TestComponent
  ],
  providers: [
  ]
})
export class TestModule { }

Portal/Test/test.routes:

import { Router, RouterModule} from '@angular/router';
import { TestComponent } from './test.component';

export const routing = RouterModule.forChild([
    { path: '', redirectTo: "reports"},
    { path: 'reports', component: TestComponent},
])

My error:

EXCEPTION: Uncaught (in promise): Error: Cannot find module './Portal/Test/test.module'.
Error: Cannot find module './Portal/Test/test.module'.

My Question is now why he do not find the Module ? I tried also other Paths but this i the only one which can really work i think.

What i need to do to fix or is angular 2 not able to do this ?

(The error is just testet with ng serve not with build | Testet with Chrome)

Answer 1

Not sure if this could help but the way I do modules is to name every module file index.ts and just specify the path to the folder when referencing them. I have never had any issues with modules not being found. Have a look at https://github.com/AngularClass/angular2-webpack-starter/tree/master/src/app for an example in how to load async modules.

Answer 2

这个问题出现在旧的@ angular /路由器上，我现在更新到3.2.0，因为我有3.1.0