6

我最近更新到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重命名为其他文件？

4

2 回答 2

5

澄清一点 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/

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

于 2019-08-05T12:26:35.030 回答
2

chunk.js不会出现在angular.io.

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

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

于 2019-02-07T08:27:23.743 回答