Angular CLI 不会为生产模式下的降级模块生成代码答案

【问题标题】：Angular CLI doesn't generate code for a downgraded module in production modeAngular CLI 不会为生产模式下的降级模块生成代码
【发布时间】：2019-12-28 18:58:47
【问题描述】：

我想在现有的angularjs 项目中开始使用 Angular 组件，我想使用downgradeModule 创建一个混合的Angular/AngularJS 应用程序。

我已经能够使用 main.ts 文件中的代码降级我的 angular 组件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { downgradeModule } from '@angular/upgrade/static';
import { AppModule } from '../new-app/src/app/app.module';

const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(AppModule);
};

const downgradedModule = downgradeModule(bootstrapFn);

angular.module('old.angular.js.app', [..., downgradedModule])

虽然在使用 ng build 和 ng serve 命令时一切正常，但 prod 模式存在问题 - 当我运行 AppModule 时不会生成 AppModule 的编译 js 代码（我无法将其视为已编译 main.{hash}.js 文件的一部分）。

我怀疑这是因为 AppModule 是按需引导的，但我不知道如何解决这个问题并让这个模块编译。

目前，由于 AppModule 尚未编译，我的 angularjs 应用程序中出现此错误

Error: [$injector:modulerr] Failed to instantiate module old.angular.js.app due to:
Error: [$injector:modulerr] Failed to instantiate module old.angular.js.app.newmodule due to:
Error: [$injector:nomod] Module 'old.angular.js.app.newmodule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

【问题讨论】：

标签： angular angular-cli angular-hybrid

【解决方案1】：

我最终在 index.html 中添加了一个降级的 Angular “引导程序”组件，其唯一目的是确保新的 Angular 应用程序尽快得到引导。

import { Component } from '@angular/core';
// This component is used to bootstrap the angular part of the application through index.html
@Component({
    selector: 'app-bootstrapper',
    template: ''
})
export class BootstrapperComponent { }

索引.html

<body>
    <div ui-view=""></div>
    <downgraded-bootstrapper></downgraded-bootstrapper>
</body>

角度降级.ts;

angular.module('your-app')
    .directive('downgradedBootstrapper', downgradeComponent({ component: BootstrapperComponent }) as angular.IDirectiveFactory)

您可能还需要调整 angular.json 设置以进行生产。我们必须设置 "optimization": false 才能使我们的生产构建工作（您也可以尝试设置 "aot": false）。

希望对您有所帮助。

【讨论】：