angular - 如何在 angular-cli 的生产 dist 文件夹中捆绑延迟加载的组件？

Question

我正在使用 angular-cli用于开发，我使用以下命令和代码来构建我的项目。

npm install angular-cli ( Angular -cli: 1.0.0-beta.10)

ng new my-app

ng g component lazy-me

然后添加了一个文件app.router.ts使用以下脚本

import { provideRouter, RouterConfig } from '@angular/router';
import { AppComponent } from './app.component';
// import { LazyMeComponent } from './+lazy-me/lazy-me.component';

const appRoutes : RouterConfig = [
  {path: '', component: AppComponent},
//   {path: 'lazyme', component: LazyMeComponent}
  {path: 'lazyme', component: 'app/+lazy-me#LazyMeComponent'}
];

export const APP_ROUTER_PROVIDER = [
    provideRouter(appRoutes)
];

并将我的 main.ts 更改如下

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode,
    SystemJsComponentResolver, 
    ComponentResolver } from '@angular/core';
import {RuntimeCompiler} from '@angular/compiler';
import { AppComponent, environment } from './app/';

import { APP_ROUTER_PROVIDER } from './app/app.router';

if (environment.production) {
    enableProdMode();
}

bootstrap(AppComponent,[
  APP_ROUTER_PROVIDER,
  {
    provide: ComponentResolver,
    useFactory: (r) => new SystemJsComponentResolver(r),
    deps: [RuntimeCompiler]
  },
]);

为了进行生产构建，我使用了以下命令 ng build -prod

当我将代码部署到网络服务器并导航到 lazyme 时路径，我得到 app/lazy-me/lazy-me.component.js 的 404 错误

文件夹存在但lazy-me.component.js正如预期的那样缺失，因为所有内容都捆绑在 main.js 中除了 .css 和 .html 文件。但是，我想要 ng build -prod包括 lazy-me.component.js在dist/app/lazy-me/ .

system-config.ts里面有没有设置或其他任何我可以将延迟加载组件包含在 dist 中的地方执行 -prod 时的文件夹构建？

Answer 1

看来您的“惰性”组件实际上并未在您的路由器配置中惰性加载。首先，您需要将它包装在自己的模块中，以便延迟加载。然后，您需要在路由器配置中使用“loadChildren”属性来引用该模块，而不是直接引用组件。

这篇文章可能会更清楚地说明整个问题，希望它不会过时并有所帮助:https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee

此外，要调试这样的问题:如果您愿意将 Angular CLI 版本升级到至少 beta.32，他们已经添加了一个类似于 create-react-app 的“弹出”命令。使用它，您可以访问 webpack 配置文件。如果默认 CLI 未按预期工作，您可以使用它更改生产构建以满足您的需求。我知道这是一种解决方法。祝你好运!