Angular 组件降级后不会在 angularjs 应用程序中呈现

Question

I'm trying to downgrade my Angular component to make it use in AngularJS app.

I looked at the documentation in Angular, but the template don't render in the page.

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 (for the Angular App) :

@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 (for the angularjs app) :

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>',
            })
});

When I go to the URL "/assistance" with $state.go, <assistance> </assistance> is show in the console, but not the angular template.

If I integrate the AssistanceComponent in bootstrap, like that :

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

And add <assistance></assistance> in index.html, the template is good, but not like I want (integrate in the main content).

I don't know what i am doing wrong...

Answer 1

I found the problem.

The version of angular/core and angular/upgrade were not the same.