5

我正在尝试降级我的 Angular 组件以使其在 AngularJS 应用程序中使用。

为了测试，我创建了非常简单的 Angular 组件：

// my-test.component.ts
@Component({
    selector: 'my-test',
    template: '<h1>Hello World</h1>'
})
export class MyTestComponent {}

之后，我在声明和 entryComponents 的 Angular 模块中注册它：

@NgModule({
    imports: [
        SharedModule,
        UpgradeModule
    ],
    declarations: [
        MyTestComponent,
       ... couple other components
    ]
    entryComponents: [ MyTestComponent ]

})
export class MyModule {
    ngDoBootstrap() {}
}

之后，我简单地创建了 angularjs 指令以使该组件在我的 angularJS 应用程序中可用。

import {MyTestComponent} from 'path/to/my-test.component';
import {downgradeComponent} from '@angular/upgrade/static';

angular.module(name, [])
.directive('myNgTest', downgradeComponent({component: MyTestComponent}))

我在我的模板中使用了它

<my-ng-test></my-ng-test>

错误：

实例化组件“MyTestComponent”时出错：不是有效的“@angular/upgrade”应用程序。您是否忘记降级 Angular 模块或将其包含在 AngularJS 应用程序中？

在我阅读的所有教程中，我可能遗漏了一些关键步骤。Angular 2 模块和 AngularJS 模块之间没有联系，但是直接导入了需要降级的组件。

欢迎任何建议！

4

1 回答 1

4

UpgradeModule您还需要angularjs从angular. 您还需要UpgradeModule在imports您的@NgModule.

引导混合应用程序

要引导混合应用程序，您必须引导应用程序的每个 Angular 和 AngularJS 部分。您必须先引导 Angular 位，然后要求 UpgradeModule 引导 AngularJS 位。

import { UpgradeModule } from '@angular/upgrade/static';


@NgModule({ imports:[UpgradeModule]})
export class MyModule {
  constructor(private readonly upgrade: UpgradeModule) {}
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [name], { strictDi: true });
  }
}
于 2019-04-15T11:44:53.480 回答