Question

我想开始在现有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模式存在问题-未生成js的已编译AppModule代码当我运行ng build --prod时（我看不到它是已编译的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.

Answer 1

我最终向index.html添加了降级的“ bootstrapper”组件，其唯一目的是确保新的角度应用程序尽快被启动。

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 { }

Index.html

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

angular-downgrades.ts;

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

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

希望这对您有帮助。

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

1 个答案: