Question

我尝试使用Lazyload路由但嵌套。但我仍然得到错误，它没有在2级路线中找到模块。

这是我的构造：

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.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.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'}
])

门户/测试/ 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 { }

门户/测试/ 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},
])

我的错误：

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

我的问题现在是他找不到模块的原因？我也尝试了其他路径，但这是我认为唯一可以真正起作用的路径。

我需要做些什么来修复或者角度2无法做到这一点？

（错误仅仅是使用ng服务而不是使用构建| Testet with Chrome）

Answer 1

不确定这是否有帮助，但我执行模块的方法是将每个模块文件命名为index.ts，并在引用它们时指定文件夹的路径。我从来没有遇到过没有找到模块的任何问题。有关如何加载异步模块的示例，请查看https://github.com/AngularClass/angular2-webpack-starter/tree/master/src/app。

Answer 2

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

Angular 2 - 在嵌套路由中找不到模块

2 个答案: