2017-04-21 20 views
1

角度ロードを遅延ロードにしようとしています。私は別のアプリで働いているバージョンを持っている、そして私が言うことができる限り、同じ方法でそれを実装している - しかし、それは単に動作しません。エラーはありません。ちょうど空の<router-outlet>です。角度2+の遅延ロードルートが失敗する(エラーなし)

ここは私のapp.module.tsです。 SharedModuleEntityViewsModule共有コンポーネント含まれています

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    SharedModule, 
    EntityViewsModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    ...rxjs stuff... 
    ], 
    providers: [ 
    ...bunch of services... 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

routingが定義されている:

import { RouterModule, Route } from '@angular/router'; 
import { ModuleWithProviders, Component } from '@angular/core'; 

const routes: Route[] = [ 
    { path: '', pathMatch: 'full', redirectTo: 'home'}, 
    { loadChildren: 'app/frontScreen/frontScreen.module#FrontScreenModule', path: 'home' }, 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(
    routes, 
    { 
    useHash: true 
    } 
); 

と私は負荷にしようとしているモジュール:

@NgModule({ 
    imports: [ 
    CommonModule, 
    EntityViewsModule, 
    SharedModule 
    ], 
    declarations: [ 
    FrontScreenComponent 
    ], 
    bootstrap: [ 
    FrontScreenComponent 
    ] 
}) 
export class FrontScreenModule { } 

それはどこ熱心なロードで正常に動作します私はcomponent: FrontScreenComponentを定義し、手動でFrontScreenModuleをインポートします。しかし、上記の設定では静かに失敗します。

リダイレクトが機能していない可能性があります。アドレスバーに「http://localhost:4200/#/」と入力しても、私が期待しているように「http://localhost:4200/#/home」にリダイレクトされません。

+0

あなたのアプリケーションモジュールに 'FrontScreenModule'を追加してください –

+1

子モジュールをロードするのはモジュールではなく子モジュールをロードすることだけです。サブモジュールをメインモジュールに追加し、子ルートをサブモジュールに定義してロードする2番目のことはルートルートを怠惰にロードするだけで、自動的に怠惰なロードを行うので、モジュールごとにこれを実行する必要はありません。 –

+0

@Babar Bilal、それは熱心にそれをインポートしないでしょうから、怠惰な読み込みの必要性を否定しますか? – Joe

答えて

1

ババールビラルは完全に正しかった、私は(child routes as defined in the docsも、実際には角度ではない)「子」を持っている必要がありますする必要がありましたが、モジュールあなた遅延ロードはそう、定義されたそれ自身のルートを持っている必要がありません:

@NgModule({ 
    imports: [ 
    CommonModule, 
    EntityViewsModule, 
    SharedModule 
    ], 
    declarations: [ 
    FrontScreenComponent 
    ] 
}) 
export class FrontScreenModule { } 
(定義されたノート、ノート子ルート)愚かなルートの種類に

const routes: Routes = [ 
    { path: '', component: FrontScreenComponent}, 
]; 

export const FrontScreenRoutes = RouterModule.forChild(routes); 

しかし、そのルートは、メインモジュールになどの子ルートをインポートされます。

関連する問題