UpgradeModule

class

npm Package	@angular/upgrade
Module	import { UpgradeModule } from '@angular/upgrade/static';
Source	upgrade/src/static/upgrade_module.ts

Overview

class UpgradeModule {
  constructor(injector: Injector, ngZone: NgZone)
  $injector: any
  injector: Injector
  ngZone: NgZone
  bootstrap(element: Element, modules: string[] = [], config?: any)
}

How To Use

import {UpgradeModule} from '@angular/upgrade/static';

Example

Import the UpgradeModule into your top level Angular `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: 'titleCase', useFactory: (i: any) => i.get('titleCase'), 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 {
  ngDoBootstrap() { /* this is a placeholder to stop the bootstrapper from complaining */
  }
}

Then bootstrap the hybrid upgrade app's module, get hold of the UpgradeModule instance and use it to bootstrap the top level AngularJS module.

// First we bootstrap the Angular HybridModule
// (We are using the dynamic browser platform as this example has not been compiled AoT)
platformBrowserDynamic().bootstrapModule(Ng2AppModule).then(ref => {
  // Once Angular bootstrap is complete then we bootstrap the AngularJS module
  const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, [ng1AppModule.name]);
});

Upgrading an AngularJS service

There is no specific API for upgrading an AngularJS service. Instead you should just follow the following recipe:

Let's say you have an AngularJS service:

// This AngularJS service will be "upgraded" to be used in Angular
ng1AppModule.factory(
    'titleCase',
    (() => (value: string) => value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase())) as any);

Then you should define an Angular provider to be included in your NgModule providers property.

// Register an Angular provider whose value is the "upgraded" AngularJS service
{provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}

Then you can use the "upgraded" AngularJS service by injecting it into an Angular component or service.

constructor(@Inject('titleCase') titleCase: (v: string) => string) {
  // Change all the hero names to title case, using the "upgraded" AngularJS service
  this.heroes.forEach((hero: Hero) => hero.name = titleCase(hero.name));
}

Description

This class is an NgModule, which you import to provide AngularJS core services, and has an instance method used to bootstrap the hybrid upgrade application.

Core AngularJS services

Importing this NgModule will add providers for the core AngularJS services to the root injector.

Bootstrap

The runtime instance of this class contains a `bootstrap()` method, which you use to bootstrap the top level AngularJS module onto an element in the DOM for the hybrid upgrade app.

It also contains properties to access the root injector, the bootstrap NgZone and the AngularJS $injector.

Constructor

Members

$injector: any

The AngularJS $injector for the upgrade application.

injector: Injector

The Angular Injector *

ngZone: NgZone

The bootstrap zone for the upgrade application

bootstrap(element: Element, modules: string[] = [], config?: any)

Bootstrap an AngularJS application from this NgModule

Annotations

@NgModule({ providers: [angular1Providers] })