Upgrading Components

The only Angular 1.x components that can be upgraded and used in Angular 2 code are those that strictly follow the component pattern outlined at the top of this document. Wherever possible use Angular 1.5+'s .component.

Here is an Angular 1.x directive that conforms to ng-upgrade's "component directive" specification:

angular.module('app').directive('a1Upgradable', function a1UpgradableDirective() {
  return {
    restrict: 'E',
    scope: {},
    bindToController: {},
    controller: Upgradable,
    controllerAs: 'a1Upgradable',
    template: `<span>{{ a1Upgradable.message }}</span>`
  };
});

class Upgradable {
  message = 'I am an Angular 1 Directive';
}

Equivalently this can be written using .component in Angular 1.5+:

angular.module('app').component('a1Upgradable', {
  controller: Upgradable,
  template: `<span>{{ a1Upgradable.message }}</span>`
});

class Upgradable {
  message = 'I am an Angular 1 Directive';
}

Below is an Angular 2 component that will use the upgraded Angular 1.x directive:

import {upgradeAdapter} from '../upgrade-adapter';
import {A2UsingA1Component} from './a2-using-a1.component';

@NgModule({
  declarations: [upgradeAdapter.upgradeNg1Component('a1Upgradable'), A2UsingA1Component],
  providers: [],
  imports: [BrowserModule]
})
export class AppModule {
}

import {Component} from '@angular/core';

@Component({
  selector: 'a2-using-a1',
  template: `<p>{{ message }}<a1-upgradable></a1-upgradable></p>`
})
export class A2UsingA1Component {
  message = 'Angular 2 Using Angular 1: ';
}

Finally, let Angular 1.x know about the directive:

import {a1UpgradableDirective} from './components/a1-upgradable';

// Angular 1 Vendor Import
import * as angular from 'angular';

// Register classic Angular 1 modules
angular
  .module(APPNAME)
  .directive('a1Upgradable', a1UpgradableDirective)