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!

Intreat

Hi @Andurit, did you find a way to downgrade your component successfully? If yes, could you please post an answer to your question? – Gout

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

Christhood

thank you for your answer. However I feel like this is a bit different approach. I have huge AngularJS application and I just want to sneak in some Angular 6 components (later possibly replace some of my AngularJS components with Angular but not now). In your case it looks more like let's add couple AngularJS components in my Angular application. Am I right? – Intreat

@Intreat - I stand corrected although you still must bootstrap angularjs from angular. In the above code name is the angularjs module name. See also the updated answer and documentation link. – Christhood

that's a good point, giving thumbs up and going to test few things around it in my project. – Intreat