Downgrading Components

Upgrading components sounds like it should happen before downgrading, but the point of upgrading is to make an Angular 1.x component work with Angular 2. For an Angular 2 component to use an Angular 1.x component in an ng-upgrade application there must first be a downgraded Angular 2 component. Consequently it's important to first learn how to downgrade Angular 2 components to work with Angular 1.x
All downgraded components operate like Angular 1.x 'E' element directives.
Here is an example of a very simple Angular 2 component:
import {Component} from '@angular/core';
​
@Component({
  selector: 'a2-downgrade',
  template: '<p>{{ message }}</p>'
})
export class A2DowngradeComponent {
  message = `What you're seeing here is an Angular2 component ` +
    `running in an Angular1 app!`;
}
Registering the downgraded component with Angular 1.x:
// Angular 1 Vendor Import
import * as angular from 'angular';
​
// Import the upgradeAdapter singleton
import {upgradeAdapter} from './upgrade-adapter';
​
// Angular 2 component from above
import {A2DowngradeComponent} from './components/a2-downgrade';
​
// Register classic Angular 1 modules
angular
  .module(APPNAME)
  .directive('a2Downgrade',
    upgradeAdapter.downgradeNg2Component(A2DowngradeComponent));
Bootstrapping ng-upgrade
Upgrading Components
Last updated 2 years ago