Question

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

为了进行测试，我创建了非常琐碎的Angular组件：

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

之后，我将其注册到我的Angular模块中的声明和entryComponents中：

@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模块之间没有连接，但是直接导入需要降级的组件。

欢迎任何建议！

Answer 1

您还需要从UpgradeModule注入angularjs和boostrap angular。您还需要在UpgradeModule的{{1}}中加入imports。

Bootstrapping hybrid applications

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

@NgModule

将Angular组件降级到AngularJS

1 个答案:

Bootstrapping hybrid applications