chunk.js 未在 Angular 7 中加载

Question

我最近更新到Angular 7。

我正在处理延迟加载模块，但是#chunk.js当我单击延迟加载模块中的组件时，我在网络选项卡中看不到任何地方。

联系我们延迟加载组件，但#chunk.js网络选项卡中没有。

这是我如何懒惰地加载我的模块。

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

import { ContactUsComponent } from 'src/app/modules/contactus/contactus.component';
import { ErrorComponent } from 'src/app/modules/error/error.component';
import { ContactUsRoutingModule } from 'src/app/modules/contactus/contactus-routing.module';
import { LandingComponent } from 'src/app/modules/landing/landing.component';
import { AboutUsComponent } from 'src/app/modules/aboutus/aboutus.component';

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'landing', component: LandingComponent },
  { path: 'aboutus', component: AboutUsComponent },
  { path: 'contactus', loadChildren: './modules/contactus/contactus.module#ContactusModule' },
  { path: '**', component: ErrorComponent }
];

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

我是否遗漏了什么或文件是否#chunk.js重命名为其他文件？

Answer 1

澄清一下 Vishwajit Singh 所说的话：

chunk.js较新版本的 Angular (7+)没有此功能。相反，Angular 加载的是一个 .js 文件，名为path-to-the-module-modulename-module.js.

这里的这个例子比Angular官方网站上的例子解释得更清楚：https://web.dev/route-level-code-splitting-in-angular/

在那里，作者还展示了延迟加载的文件。

Answer 2

chunk.js不会出现在 的网络选项卡中angular.io。

Angular 7.x 的延迟加载示例。

要检查延迟加载是否正常工作，请导航至该功能并验证延迟加载模块是否已在网络选项卡中列出。但是，如果您使用的是preloadingStrategy，惰性模块将被预加载，因此如果您正在使用，请考虑删除 preloadingStrategy 以进行测试。