在没有延迟加载的情况下路由到子路由模块

问题描述：

我想要多个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将大幅增长的规模，我不希望根据我自己的理由申请延迟加载。所以无论如何，有没有办法使用多个路由文件，同时避免延迟加载？

答

，你是否尝试加载它是这样的：

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

你可以找到很多的更多详细信息here。

谢谢，我将通读这篇文章并明天尝试您的解决方案。将保持您张贴和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

它会使第二个路由模块过时 - 这是我明确要避免的。 – 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。

我希望它有帮助。

在没有延迟加载的情况下路由到子路由模块

相关推荐