Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/upgrade > @angular/upgrade/static

downgradeInjectable

A helper function to allow an Angular service to be accessible from AngularJS.

See more...

downgradeInjectable(token: any, downgradedModule: string = ''): Function
      
      downgradeInjectable(token: any, downgradedModule: string = ''): Function
Parameters
token any

an InjectionToken that identifies a service provided from Angular.
downgradedModule string

the name of the downgraded module (if any) that the injectable "belongs to", as returned by a call to downgradeModule(). It is the module, whose injector will be used for instantiating the injectable.
(This option is only necessary when using downgradeModule() to downgrade more than one Angular module.)

Optional. Default is ''.
Returns

Function: a factory function that can be used to register the service on an AngularJS module.

Description

Part of the upgrade/static library for hybrid upgrade apps that support AoT compilation

This helper function returns a factory function that provides access to the Angular service identified by the token parameter.

Usage notes

Examples

First ensure that the service to be downgraded is provided in an NgModule that will be part of the upgrade application. For example, let's assume we have defined HeroesService

// This Angular service will be "downgraded" to be used in AngularJS @Injectable() class HeroesService { heroes: Hero[] = [ {name: 'superman', description: 'The man of steel'}, {name: 'wonder woman', description: 'Princess of the Amazons'}, {name: 'thor', description: 'The hammer-wielding god'} ]; constructor(textFormatter: TextFormatter) { // Change all the hero names to title case, using the "upgraded" AngularJS service this.heroes.forEach((hero: Hero) => hero.name = textFormatter.titleCase(hero.name)); } addHero() { this.heroes = this.heroes.concat([{name: 'Kamala Khan', description: 'Epic shape-shifting healer'}]); } removeHero(hero: Hero) { this.heroes = this.heroes.filter((item: Hero) => item !== hero); } } 
      
      
  1. // This Angular service will be "downgraded" to be used in AngularJS
  2. @Injectable()
  3. class HeroesService {
  4.   heroes: Hero[] = [
  5.     {name: 'superman', description: 'The man of steel'},
  6.     {name: 'wonder woman', description: 'Princess of the Amazons'},
  7.     {name: 'thor', description: 'The hammer-wielding god'}
  8.   ];
  9.  
  10.   constructor(textFormatter: TextFormatter) {
  11.     // Change all the hero names to title case, using the "upgraded" AngularJS service
  12.     this.heroes.forEach((hero: Hero) => hero.name = textFormatter.titleCase(hero.name));
  13.   }
  14.  
  15.   addHero() {
  16.     this.heroes =
  17.         this.heroes.concat([{name: 'Kamala Khan', description: 'Epic shape-shifting healer'}]);
  18.   }
  19.  
  20.   removeHero(hero: Hero) { this.heroes = this.heroes.filter((item: Hero) => item !== hero); }
  21. }

and that we have included this in our upgrade app NgModule

// This NgModule represents the Angular pieces of the application @NgModule({ declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper], providers: [ HeroesService, // Register an Angular provider whose value is the "upgraded" AngularJS service {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']} ], // All components that are to be "downgraded" must be declared as `entryComponents` entryComponents: [Ng2HeroesComponent], // We must import `UpgradeModule` to get access to the AngularJS core services imports: [BrowserModule, UpgradeModule] }) class Ng2AppModule { } 
      
      
  1. // This NgModule represents the Angular pieces of the application
  2. @NgModule({
  3.   declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
  4.   providers: [
  5.     HeroesService,
  6.     // Register an Angular provider whose value is the "upgraded" AngularJS service
  7.     {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']}
  8.   ],
  9.   // All components that are to be "downgraded" must be declared as `entryComponents`
  10.   entryComponents: [Ng2HeroesComponent],
  11.   // We must import `UpgradeModule` to get access to the AngularJS core services
  12.   imports: [BrowserModule, UpgradeModule]
  13. })
  14. class Ng2AppModule {
  15. }

Now we can register the downgradeInjectable factory function for the service on an AngularJS module.

// Register an AngularJS service, whose value is the "downgraded" Angular injectable. ng1AppModule.factory('heroesService', downgradeInjectable(HeroesService) as any); 
      
      // Register an AngularJS service, whose value is the "downgraded" Angular injectable.
ng1AppModule.factory('heroesService', downgradeInjectable(HeroesService) as any);

Inside an AngularJS component's controller we can get hold of the downgraded service via the name we gave when downgrading.

// This is our top level application component ng1AppModule.component('exampleApp', { // We inject the "downgraded" HeroesService into this AngularJS component // (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript // compilation) controller: [ 'heroesService', function(heroesService: HeroesService) { this.heroesService = heroesService; } ], // This template makes use of the downgraded `ng2-heroes` component // Note that because its element is compiled by AngularJS we must use kebab-case attributes // for inputs and outputs template: `<link rel="stylesheet" href="./styles.css"> <ng2-heroes [heroes]="$ctrl.heroesService.heroes" (add-hero)="$ctrl.heroesService.addHero()" (remove-hero)="$ctrl.heroesService.removeHero($event)"> <h1>Heroes</h1> <p class="extra">There are {{ $ctrl.heroesService.heroes.length }} heroes.</p> </ng2-heroes>` }); 
      
      
  1. // This is our top level application component
  2. ng1AppModule.component('exampleApp', {
  3.   // We inject the "downgraded" HeroesService into this AngularJS component
  4.   // (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript
  5.   // compilation)
  6.   controller: [
  7.     'heroesService', function(heroesService: HeroesService) { this.heroesService = heroesService; }
  8.   ],
  9.   // This template makes use of the downgraded `ng2-heroes` component
  10.   // Note that because its element is compiled by AngularJS we must use kebab-case attributes
  11.   // for inputs and outputs
  12.   template: `<link rel="stylesheet" href="./styles.css">
  13.           <ng2-heroes [heroes]="$ctrl.heroesService.heroes" (add-hero)="$ctrl.heroesService.addHero()" (remove-hero)="$ctrl.heroesService.removeHero($event)">
  14.             <h1>Heroes</h1>
  15.             <p class="extra">There are {{ $ctrl.heroesService.heroes.length }} heroes.</p>
  16.           </ng2-heroes>`
  17. });

When using downgradeModule(), downgraded injectables will not be available until the Angular module that provides them is instantiated. In order to be safe, you need to ensure that the downgraded injectables are not used anywhere outside the part of the app where it is guaranteed that their module has been instantiated.

For example, it is OK to use a downgraded service in an upgraded component that is only used from a downgraded Angular component provided by the same Angular module as the injectable, but it is not OK to use it in an AngularJS component that may be used independently of Angular or use it in a downgraded Angular component from a different module.