角-如何在角9-常春藤进行代码分裂？

Question

在角8 (8.2.14)中，我的应用程序可以通过延迟加载模块进行代码分割。构建日志如下(省略了一些冗余行)，36个块：

chunk {3} runtime-es2015.c423f91aaae76527df5b.js (runtime) 3.08 kB [entry] [rendered]
chunk {3} runtime-es5.c423f91aaae76527df5b.js (runtime) 3.07 kB [entry] [rendered]
chunk {2} 2-es2015.539ede95a6745ef5d2bf.js () 22.6 kB  [rendered]
...
chunk {12} polyfills-es2015.32f951d8d1908f922bdc.js (polyfills) 35.6 kB [initial] [rendered]
chunk {10} 10-es2015.8da7355d1a7b512401a1.js () 31.7 kB  [rendered]
...
chunk {0} 0-es5.bfd951267cfba9ec1f8d.js () 32.4 kB  [rendered]
chunk {1} common-es2015.10ba6f24dba298440ecc.js (common) 13.4 kB  [rendered]
chunk {1} common-es5.10ba6f24dba298440ecc.js (common) 19.6 kB  [rendered]
...
chunk {11} main-es2015.29e5558ae4fba71b1763.js (main) 755 kB [initial] [rendered]
chunk {11} main-es5.29e5558ae4fba71b1763.js (main) 806 kB [initial] [rendered]
chunk {36} 36-es2015.f988ae90643f26871ae8.js () 231 kB  [rendered]
...
chunk {15} vendor-es5.e7af4362172dcd47c55b.js (vendor) 1.41 MB [initial] [rendered]
chunk {14} styles.5ab582a2e3cd140ea795.css (styles) 301 kB [initial] [rendered]

升级到角9 (9.1.12)后，使用ng update (ng update @angular/core@9 @angular/cli@9)。

该应用程序运行良好，但产品构建由几个大包组成，构建日志如下所示，6块：

chunk {0} runtime-es2015.602346de10cd8007336b.js (runtime) 2.25 kB [entry] [rendered]
chunk {0} runtime-es5.602346de10cd8007336b.js (runtime) 2.25 kB [entry] [rendered]
chunk {3} polyfills-es2015.b2b33e7ed47c34d70569.js (polyfills) 37.4 kB [initial] [rendered]
chunk {2} main-main-module-es2015.f40c22576bd3c677d2bf.js (main-main-module) 1.63 kB  [rendered]
chunk {2} main-main-module-es5.f40c22576bd3c677d2bf.js (main-main-module) 3.24 kB  [rendered]
chunk {4} polyfills-es5.9fc110dc43c419da899c.js (polyfills-es5) 130 kB [initial] [rendered]
chunk {1} main-es2015.49ac9fca75e556a35c57.js (main) 1.45 MB [initial] [rendered]
chunk {1} main-es5.49ac9fca75e556a35c57.js (main) 1.54 MB [initial] [rendered]
chunk {6} vendor-es2015.b8aa44d253e8fc5e1203.js (vendor) 2.28 MB [initial] [rendered]
chunk {6} vendor-es5.b8aa44d253e8fc5e1203.js (vendor) 2.44 MB [initial] [rendered]
chunk {5} styles.03960512702293db9549.css (styles) 288 kB [initial] [rendered]

那么，如何在延迟加载模块的角度9，常春藤渲染？

备注：

• 升级是由ng update自动运行的，没有手动修复。
• 所有loadChildren都更改为新语法： () import('../authentication/authentication.module').then((m) loadChildren m.AuthenticationModule)，
• 相关的angular.json吐露如下： “生产”：{“"apps/web-web/src/environments/environment.ts"，”：{“替换”："apps/web-web/src/environments/environment.prod.ts“}，”优化“：true，"outputHashing"："all"，"sourceMap"：false，"extractCss"：true，"namedChunks"：false，"extractLicenses"：true，"vendorChunk"：true，"buildOptimizer"：true，“buildOptimizer”："maximumWarning"：{ "type"："initial"，"maximumWarning"："2mb"，"maximumError"："5mb“}，{ "type"："anyComponentStyle"，”maximumWarning“："6kb"，"maximumError"："10kb“}，"serviceWorker"：true，"ngswConfigPath"：”app/web/ngsw-config.json“}
• 这是一个在Nx工作区中使用xplat的项目。
• 我们现在不想升级到角10，因为我们正在与Nativescript角项目共享代码，并且希望等到Nativescript与角10很好地工作。
• 打字稿吐露： // tsconfig.json { "compileOnSave"：false，"compilerOptions"：{ "rootDir"："."，"sourceMap"：true，“sourceMap”：“false”，"moduleResolution"：“节点”，"emitDecoratorMetadata"：true，"experimentalDecorators"：true，"importHelpers"：true，“importHelpers”：true："es2015"，“模块”："esnext"，"typeRoots"：“节点_模块/@类型”，"lib"："es2017"，"dom"，"skipLibCheck"：true，"skipDefaultLibCheck"：true，"resolveJsonModule"：true，"allowSyntheticDefaultImports"：true，"baseUrl"："."，“path”：{ "@workspacename/*"："libs/*"，"@workspacename/nativescript"："xplat/nativescript/index.ts"，"@workspacename/nativescript/*"："xplat/nativescript/*"，"@workspacename/web"："xplat/web/index.ts"，"@workspacename/web/*"："xplat/web/*"，“core-js/es7/web”："node_modules/core-js/proposals/reflect-metadata"，"core-js/es6/*"：“节点_模块/core-js/es/*”}，“排除”："node_modules"，"tmp“}/ apps/project-name/tsconfig.json { "compilerOptions"：”././tsconfig.json“，”compilerOptions“：{”type“："node"，"jest”}，“包括”：“**/*.tsc”} // apps/project-name/tsconfig.app.json { "extends"："./tsconfig.json"，"compilerOptions"：{ "outDir"：“././dist/out-tsc”，“type”：[] }，“file”："src/main.ts"，“src/poly滤器”，“包括”："**/*.d.ts“、”排除“："src/test-setup.ts”、"**/*.spec.ts“、"**/*.stories.ts”}

Answer 1

确保没有将懒惰(子)模块导入app.module。

(错)

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { CustomersModule } from './customers/customers.module';
import { OrdersModule } from './orders/orders.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomersModule,
    OrdersModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(右)

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(上面的错误代码和正确代码都使用此路由文件：)

app-routing.module.ts：

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

const routes: Routes = [
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) },
  { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) }
];

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