Angular 组件降级后无法在 angularjs 应用程序中呈现

Question

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

我查看了 Angular 中的文档，但模板未在页面中呈现。

assistance.component.ts :

import {Component} from "@angular/core";
import {downgradeComponent} from "@angular/upgrade/static";
declare var angular: angular.IAngularStatic;

@Component({
    selector: 'assistance',
    template: '<h1>Assistance</h1>',
})
export class AssistanceComponent {

    constructor() {
    }
}

angular.module('AssistanceModule', []).directive('assistance', downgradeComponent({component: AssistanceComponent}) as angular.IDirectiveFactory);

main.ts（对于 Angular 应用程序）：

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule,
        HttpClientModule,
        FormsModule,
        CommonModule
    ],
    declarations: [
        AssistanceComponent
    ],
    entryComponents: [
        AssistanceComponent
    ],
})
export class AppModule {
    ngDoBootstrap() {
    }
}

// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");

    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, [sampleAppModuleAngularJS.name]);
});

app.ts（对于 angularjs 应用程序）：

export const sampleAppModuleAngularJS = angular.module('AngularJS',
        [
            'ui.router',
            'ngMessages',
            'ngSanitize',
             ...
            'AssistanceModule'
        ]).config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('homeComponent', {
                url: '/home',
                template: '<home></home>'
            })
            .state('AssistanceComponent', {
                url: '/assistance',
                template: '<assistance></assistance>',
            })
});

当我使用 $state.go 进入 URL“/assistance”时，<assistance> </assistance> 显示在控制台中，而不是 angular 模板。

如果我在 bootstrap 中集成 AssistanceComponent，就像那样：

...
declarations: [
        AssistanceComponent
    ],
    entryComponents: [
        AssistanceComponent
    ],
    bootstrap: [
        AssistanceComponent
    ]
...

并在index.html中添加<assistance></assistance>，模板不错，但不是我想要的（融入主要内容）。

我不知道我做错了什么...

Answer 1

我发现了问题。

angular/core 和 angular/upgrade 的版本不一样。

Angular 组件降级后无法在 angularjs 应用程序中呈现

Angular component downgraded not render in angularjs application

javascript

angularjs

typescript

angular-upgrade

angular