Downgrade Angular component to AngularJS

Question

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

For test I created quite trivial Angular component:

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

after that I register it in my Angular module in declarations and entryComponents:

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

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

and after that I simply created angularjs directive to make this component available inside my angularJS app.

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

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

and I used it in my template

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

Error:

Error while instantiating component 'MyTestComponent': Not a valid '@angular/upgrade' application. Did you forget to downgrade an Angular module or include it in the AngularJS application?

I am probably missing some key step in all that tutorials I've been reading. There is no connection between Angular 2 module and AngularJS module however there is direct import of component that need to be downgraded.

Any advise is welcome!

Answer 1

You also need to inject UpgradeModule and boostrap angularjs from angular. You also need to include UpgradeModule in your imports on your @NgModule.

Bootstrapping hybrid applications

To bootstrap a hybrid application, you must bootstrap each of the Angular and AngularJS parts of the application. You must bootstrap the Angular bits first and then ask the UpgradeModule to bootstrap the AngularJS bits next.

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