Angular 2+，延遲加載路由失敗（無錯誤）

我試圖讓我的Angular路由延遲加載。我在另一個應用程序中有一個工作版本，並且據我所知可以用相同的方式實現它 - 但它不起作用。沒有錯誤，只是一個空的<router-outlet>。Angular 2+，延遲加載路由失敗（無錯誤）

這是我的app.module.ts。該SharedModule和EntityViewsModule包含共享組件：

@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'。

來源

2017-04-21 Joe

將'FrontScreenModule'添加到您的應用程序模塊中 –

加載孩子只能加載子路徑，而不是自己的模塊，您必須將子模塊添加到主模塊中，並將子路徑定義到子模塊中，並調用加載子模塊加載路由和第二件事你只能懶加載你的根路由，然後它會自動延遲加載你的孩子，所以沒有必要按照這個每個模塊。 –

@Babar Bilal，不會那麼熱衷於導入它，從而否定對延遲加載的需求嗎？ – Joe

巴巴爾比拉爾是完全正確的，我也必須得有「孩子」（當然，不是真的角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);

但是路由引入爲孩子路線的主要模塊。

來源

2017-04-24 09:20:38 Joe

Angular 2+，延遲加載路由失敗（無錯誤）

回答

相關問題