0

我想开始在现有angularjs项目中使用 Angular 组件，并希望使用它downgradeModule来创建混合Angular/AngularJS应用程序。

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

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虽然使用and命令时一切正常ng serve，但 prod 模式存在问题 -我运行时未生成编译js代码（我无法将其视为编译文件的一部分）。AppModuleng build --prodmain.{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.
4

1 回答 1

0

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

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）。

希望这对您有所帮助。

于 2019-09-02T12:49:30.120 回答