如何在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)
];

并改变了我的主要内容如下

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

当我将代码部署到Web服务器并导航到lazyme路径时,我收到404错误app/lazy-me/lazy-me.component.js

该文件夹存在但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 未按预期工作，您可以更改生产版本以满足您的需求。我知道这是一种解决方法。祝你好运！