Question

通过以下文章，我试图避免延迟加载：

https://www.concretepage.com/angular-2/angular-module-loading-eager-lazy-and-preloading

但它似乎对我不起作用。我已经设置了此路由（在我开始处理延迟加载之前），它看起来像这样：

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

import { StepsComponent } from './steps.component';

const stepRoutes: Routes = [
  { path: 'steps', redirectTo: 'steps/one', pathMatch: 'full' },
  { path: 'steps/:path', component: StepsComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(stepRoutes) ],
  exports: [ RouterModule ]
})
export class StepsRoutingModule { }

所以我想让它延迟加载。因此，起初我只是从 AppModule 中删除了我的 StepsModule ，并将 AppRouting 模块更新为此：

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },

  // Lazy load
  //{ path: 'home', loadChildren: 'app/home/home.module#HomeModule '},
  { path: 'steps', loadChildren: 'app/steps/steps.module#StepsModule '}
]

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

然后我将 StepsRouting 模块更改为此：

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

import { StepsComponent } from './steps.component';

const stepRoutes: Routes = [
  { path: '', redirectTo: 'steps/one', pathMatch: 'full' },
  { path: 'steps/:path', component: StepsComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(stepRoutes) ],
  exports: [ RouterModule ]
})
export class StepsRoutingModule { }

但是它不起作用。我可以看到在为应用程序提供服务时未加载 StepsModule ，但如果尝试导航到 steps 视图，则不会出现错误，Url会更改，但是不会加载 StepsModule 。

有人知道为什么吗？

Answer 1

您现在拥有的方式将成为路线/steps/steps/:path。从steps/中删除stepRoutes：

{ path: ':path', component: StepsComponent }

具有参数的角延迟加载

1 个答案: