Downgrade (downgradeComponent / downgradeInjectable)

In ngUpgrade, downgrading means wrapping an Angular component or service so that AngularJS code can use it as a directive or an injectable.

During a hybrid migration, new code is written in Angular while most screens are still AngularJS. The old screens need a way to use the new code. The downgradeComponent and downgradeInjectable functions from @angular/upgrade/static provide it.

downgradeComponent returns an AngularJS directive that renders an Angular component. downgradeInjectable returns an AngularJS factory that hands back an Angular service instance. In both cases there is a single implementation, written in Angular, and AngularJS gets a thin adapter.

Example

import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';

angular.module('legacyApp')
  .directive('userCard', downgradeComponent({ component: UserCardComponent }))
  .factory('userService', downgradeInjectable(UserService));

An AngularJS template can now use the component. Inputs and outputs use Angular binding syntax with kebab-case names:

<user-card [user]="vm.user" (saved)="vm.onSaved($event)"></user-card>

An AngularJS controller can inject userService by name, like any other service.

Common misunderstanding

The word suggests moving code backwards or making it worse. Nothing is rewritten in AngularJS. The Angular code is the real implementation, and the downgrade wrapper only exposes it to the old framework.

A useful order follows from this. Migrate services and leaf components first, downgrade them, and let the legacy screens consume them. As more screens move to Angular, the wrappers lose their callers and can be deleted. Wrappers that remain at the end of the project point to unfinished work. The AngularJS to Angular reference lists the modern equivalent of each API.

Related terms

• ngUpgrade (UpgradeModule)
• Hybrid application (AngularJS + Angular)
• Incremental migration