无需延迟加载即可路由到子路由模块

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 }
    ] 
  }
];

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

亚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

你可以像 eminlala 说的那样使用箭头函数，但如果你运行一个产品构建，它就不会工作。

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

因此，为了使其在产品构建中工作，您需要创建一个导出函数，如下所示。

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

export function loadSubModule() {
  return SubModule;
}

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

我用这个conf创建一个文件并将其导入AppRoutingModule，但你可以把它写在AppRoutingModule里面。

希望对您有所帮助。

Answer 4

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 },
];

无需延迟加载即可路由到子路由模块

Routing to sub routing module without lazy loading

routing

router

lazy-loading

angular-routing

angular