2016-11-17 12 views
1

Lazyloadルートを使用しようとしましたが、ネストしました。しかし、私はまだ2レベルのルートでモジュールを見つけることができないというエラーを取得します。ここで角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/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される|クロームとTestet)これは役立つかもしれないが、私は、モジュールのやり方は、すべてのモジュールファイルindex.tsに名前を付けることで、単に指定した場合

+0

でしたか? {path: 'reports'、コンポーネント:PortalComponent、loadChildren: './Test/test.module#TestModule'}? –

+0

いいえ、私は本当にすべてのものを試しました –

+0

なぜあなたはこのコンポーネントを持っていますか?PortalComponent? –

答えて

0

わかりませんそれらを参照するときのフォルダへのパス。モジュールが見つからないという問題は一度もありませんでした。非同期モジュールをロードする方法の例については、https://github.com/AngularClass/angular2-webpack-starter/tree/master/src/appを参照してください。

+0

あなたのgitは同じ構成ではありません。ちょうど1レベルの子があるので –

0

この問題は古い@ angular/routerにありました。私は3.1.0

関連する問題