在 Angular 7 版本中，延迟加载不起作用

Question

我已将我的 Angular 6 版本更新为 Angular 7 版本。现在，当我尝试导航到“http://localhost:4200/pages”时出现错误。我在我的应用程序中使用延迟加载路由概念。

错误：-

core.js:12584 ERROR 错误：未捕获（承诺中）：错误：找不到模块'./Pages/Test/Test.module' 错误：找不到模块“./Pages/Test/Test.module” 在 $_lazy_route_resource 惰性命名空间对象：5 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) 在 Object.onInvoke (core.js:14143) 在 ZoneDelegate.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) 在 zone.js:872 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:14134) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) 在 $_lazy_route_resource 惰性命名空间对象：5 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) 在 Object.onInvoke (core.js:14143) 在 ZoneDelegate.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';。

希望这会有所帮助！

-伊万

Answer 3

首先，您应始终将路径以最严格的路径开头并最终放置默认路径...然后，您没有共享您的模块代码，我们只能假设您很容易拥有一个 test-routing.module.ts 文件，该文件正确定义了在调用/匹配该模块中的路径时要加载的组件。

app-routing.module.ts

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

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

test-routing.module.ts

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

import { TestComponent } from "./test/test.component";

const routes: Routes = [
  {
    path: "",
    component: TestComponent
  }
];

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

Answer 4

为了在为 Angular 7 启用 AOT 时快速加载具有函数引用的模块，您需要创建一个 NgFactory 模块，正如您从这个 PR - https://github.com/angular/angular/pull/13909 中看到的那样。

一个可行的解决方案是创建我的模块的克隆并将.ngfactory 后缀添加到文件名，并将NgFactory 后缀添加到模块类名。

import { FirstPageModuleNgFactory } from '../pages/first-page.module.ngfactory';
import { SecondPageModuleNgFactory } from '../pages/second-page.module.ngfactory';

export function loadFirstPageModule() {
    return FirstPageModuleNgFactory;
}

export function loadSecondPageModule() {
    return SecondPageModuleNgFactory;
}

const routes: Routes = [
    {
        path: '',
        component: HomePageComponent,
        children: [
            {
                path: '',
                redirectTo: 'first',
                pathMatch: 'full',
            },
            {
                path: 'first',
                loadChildren: loadFirstPageModule,
            },
            {
                path: 'second',
                loadChildren: loadSecondPageModule,
            },
        ],
    },
];