Question

我想拥有多个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会大幅增加，我不想因为自己的原因而申请延迟加载。所以无论如何，有没有办法在避免延迟加载的同时使用多个路由文件？

Answer 1

您是否尝试过这样加载：

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

您可以找到更多详细信息here。

Answer 2

您忘记申报到new

的子路线

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

如果你想保留第二个路由模块

sub-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

Answer 3

app.module.ts

 @NgModule({
    
      imports: [
        ...,
       SubModule,   /* subModule with routing, the order is very important */ 
       AppRoutingModule,  // put it at the end
      ]
}

路由模块的顺序非常重要。

AppRoutingModule.ts

const routes: Routes = [
  // filter path '**' will prevent routing to the subModule
  { path: '**', component: PageNotFoundComponent },
];

Answer 4

你可以像eminlala所说的那样使用箭头功能，但是如果你运行prod版本它将不起作用。

{ 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中编写它。

我希望它有所帮助。

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

4 个答案: