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

For test I created quite trivial Angular ponent:

// my-testponent.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 ponents
    ]
    entryComponents: [ MyTestComponent ]

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

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

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

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

and I used it in my template

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

Error:

Error while instantiating ponent '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 ponent that need to be downgraded.

Any advise is wele!

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

For test I created quite trivial Angular ponent:

// my-test.ponent.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 ponents
    ]
    entryComponents: [ MyTestComponent ]

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

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

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

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

and I used it in my template

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

Error:

Error while instantiating ponent '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 ponent that need to be downgraded.

Any advise is wele!

• javascript
• angularjs
• angular
• angular-hybrid

• Hi @Andurit, did you find a way to downgrade your ponent successfully? If yes, could you please post an answer to your question? – Kruti Parekh Commented Apr 21, 2021 at 10:11

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