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!

Hi @Andurit, did you find a way to downgrade your component successfully? If yes, could you please post an answer to your question? — Kruti Parekh, Apr 21 '21 at 10:11

Igor · Answer 1 · 2019-04-15T12:16:40.420

4

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

edited Apr 15 '19 at 12:16

answered Apr 15 '19 at 11:44

Igor

60,821
10
100
175

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? – Andurit Apr 15 '19 at 12:00
@Andurit - 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. – Igor Apr 15 '19 at 12:19
that's a good point, giving thumbs up and going to test few things around it in my project. – Andurit Apr 15 '19 at 12:26

Downgrade Angular component to AngularJS

1 Answers1

Bootstrapping hybrid applications