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

Question

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

错误：-

core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot find module './Pages/Test/Test.module' Error: Cannot find module './Pages/Test/Test.module' at $_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) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:14134) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at $_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) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)

应用-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

对于开始，您应该总是首先放置以最严格的路径开始的路径，最后是默认路径...然后，你没有分享你的模块代码，我们只能假设你很容易有一个 test-routing.module.ts 文件正确定义了路径时要加载的组件该模块中有 called/matched.

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 3

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

对我来说，一个可行的解决方案是创建我的模块的克隆，并向文件名添加 .ngfactory 后缀，并向模块 class 名称添加 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,
            },
        ],
    },
];

Answer 4

被接受的答案是错误的，实际上应该被删除，因为它具有误导性，而且一旦被采用，可能会导致意外的行为和性能问题。问题是，一旦您导入模块（代码中的第一行），如 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';。

希望对您有所帮助！

-伊万

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

In Angular 7 version Lazy Loading is not working

angular-routing

webpack

angular-router

angular7

应用-routing.ts