Injecting Across Frameworks

    Simple Angular 1.x service:

    Simple Angular 2 component that will have an Angular 1.x service injected into it:

    2. import {A1UpgradeService} from '../services/a1-upgrade-service';
    4. @Component({
    5.   selector: 'a2-using-a1-service',
    6.   template: `<p>{{ message }}</p>`
    7. })
    8. export class A2UsingA1Service {
    9.   message = '';
    10.   constructor(@Inject('a1UpgradeService') a1UpgradeService:A1UpgradeService) {
    11.     this.message = a1UpgradeService.data;
    12.   }

    Angular 2.x services can be downgraded and injected into Angular 1. In normaloperation, Angular 2.x services would be bootstrapped with the application, butbecause of ng-upgrade being a hybrid mode, this is not the case. The upgradeadapter comes with an method that must be used in the interim.

    Here is a very simple Angular 2 service:

    1. import {Injectable} from '@angular/core';
    3. @Injectable()
    4. export class A2DowngradeService {
    5.   fetchData() {
    6.     return 'some data';
    7.   }
    8. }

    Lastly, Angular 1.x must be informed about the Angular 2 service:

    1. // The service to downgrade
    2. import {A2DowngradeService} from './services/a2-downgrade'
    6. // Import the upgradeAdapter singleton
    7. import {upgradeAdapter} from './upgrade-adapter';
    9. // Name the application
    10. const APPNAME = 'angular-upgrade-example';
    12. // Register classic Angular 1 modules
    13. angular
    14.   .module(APPNAME)
    15.   .factory('a2DowngradeService',

    Using this downgraded service in an Angular 1.x directive is as simple as: