在沒有延遲加載的情況下路由到子路由模塊

我想要多個routing模塊以保持我的應用程序清潔並易於閱讀。我目前使用延遲加載SubComponent，但我不想這樣做。所以我正在尋找一種方法來改變這一點。無論如何，這是目前正在工作的代碼。在沒有延遲加載的情況下路由到子路由模塊

我有以下兩個路由文件。

app-routing.module.ts：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'sub', loadChildren: './sub/sub.module#SubModule' } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
})

sub-routing.module.ts：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

const routes: Routes = [ 
    { path: '', component: SubComponent, children: [ 
    { path: 'new', component: SubEditComponent } 
    ] }, 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
})

它工作正常，這樣一來，但我不希望延遲加載適用於本SubComponent。所以，最好我想在app-routing.module.ts改成這樣：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'sub', component: SubComponent } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
})

這將無法工作，導致出現以下錯誤：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'sub/new' 
Error: Cannot match any routes. URL Segment: 'sub/new'

的SubComponent將大幅增長的規模，我不希望根據我自己的理由申請延遲加載。所以無論如何，有沒有辦法使用多個路由文件，同時避免延遲加載？

來源

2017-08-01 Spurious

，你是否嘗試加載它是這樣的：

{ path: 'sub', loadChildren:() => SubModule }

你可以找到很多的更多詳細信息here。

來源

2017-08-01 20:29:20 eminlala

謝謝，我將通讀這篇文章並明天嘗試您的解決方案。將保持您張貼和upvote，如果它的工作。 – Spurious

謝謝，這一切現在工作！ – Spurious

當您嘗試製作產品時，這不起作用。 – Sam

你忘了孩子航線申報new

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { 
    path: 'sub', 
    component: SubComponent, 
    children: [ 
     { path: 'new', component: SubEditComponent } 
    ] 
    } 
];

，如果你想保持第二路由模塊，然後

子routing.module.ts

const routes: Routes = [ 
    { path: 'sub', component: SubComponent, children: [ 
    { path: 'new', component: SubEditComponent } 
    ] }, 
];

個sub.module.ts

@NgModule({ 
    ... 
    imports: [ 
    ... 
    SubRoutingModule,

app.module.ts

@NgModule({ 

    imports: [ 
    ..., 
    AppRoutingModule, 
    SubModule

Plunker Example

來源

2017-08-01 20:29:28 yurzui

它會使第二個路由模塊過時 - 這是我明確要避免的。 – Spurious

感謝您的編輯，但導入已經存在，並且不起作用。 – Spurious

@瘋狂這意味着你做錯了什麼。一分鐘... – yurzui

爲eminlala說，你可以用一個箭頭的功能，但如果您運行產品，它將不起作用建立。

{ path: 'sub', loadChildren:() => SubModule }

因此，爲了使它在prod版本中工作，您需要創建一個導出函數，如下所示。

import SubModule from 'path-to-sub-module'; 

export function loadSubModule() { 
    return SubModule; 
} 

export const SUB_MODULE_ROUTING = { 
    path: 'sub', 
    loadChildren: loadSubModule, 
};

我用它來創建與此的conf文件並將其導入到AppRoutingModule，但你可以把它寫裏面AppRoutingModule。

我希望它有幫助。

來源

2018-03-09 19:24:07

在沒有延遲加載的情況下路由到子路由模塊

回答

相關問題