无延迟加载路由到子路由模块

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里面。

希望对你有帮助。