在Angular 7版本中,Lazy Loading无效

Question

我已将角度6版本更新为角度7版本.现在,当我尝试导航到' http:// localhost:4200/pages ' 时,我收到错误.我在我的应用程序中使用延迟加载路由概念.

错误:-

core.js:12584 ERROR错误:未捕获(在承诺中):错误:找不到模块'./Pages/Test/Test.module'错误:无法在$ _lazy_route_resource懒惰中找到模块'./Pages/Test/Test.module'命名空间对象:5,位于ZoneDelegate.push的Object.onInvoke(core.js:14143)的ZoneDelegate.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:388). Zone.push上的/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:387)../ node_modules/zone.js/dist/zone.js.Zone.run(zone.js: 138)在zone.les:872 at ZoneDelegate.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:421),位于ZoneDelegate的Object.onInvokeTask(core.js:14134) Zone.push上的.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:420)../ node_modules/zone.js/dist/zone.js.Zone.runTask( zone.js:188)$ _lazy_route_resource lazy namespace object:5 at ZoneDelegate.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:388)at Object.onInvoke(core. js:14143)在ZoneDele zone.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:387)在Zone.push ../ node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)

APP-routing.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes} from '@angular/router';

export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }      
]

告诉我,如何解决这个错误.

Answer 1

在尝试了很多更改之后,我发现我的app.routing.ts应该是这样的: -

import { TestModule } from './Pages/test/test.module';

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: () =>  TestModule
 }      
]

改变后,这对我来说非常适合.

Answer 2

接受的答案是错误的，实际上应该删除，因为它具有误导性，并且在采用时可能会导致意外的行为和性能问题。问题是，一旦您导入一个模块（代码中的第一行），import { TestModule } from './Pages/test/test.module';该模块就会被直接（热切地）加载。无论您向 提供什么loadChildren。

请参阅下面的正确方法：

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: '/test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: () => import('./Pages/test/test.module').then(mod => mod.TestModule)
  }      
]

像这样，仅当调用中提供的函数时才会导入（加载）模块loadChildren，这仅在您导航到 时才会发生/test。import { TestModule } from './Pages/test/test.module';如您所见，我从代码开头删除了初始导入。

希望这可以帮助！

-伊万