Bootstrapping ng-upgrade

  • Use manual Angular 1.x bootstrapping, and remove ng-app/ng-strict-direferences if they exist
  • Add Angular 2 dependencies
  • Add the upgrade adapter import {UpgradeAdapter} from '@angular/upgrade'
  • Call the upgrade adapter's bootstrap
    Once this is working the foundation is set for transitioning from Angular 1.x toAngular 2. It is important to note that the upgrade adapter's bootstrapmechanism is asynchronous. Additionally it's important to treat the upgradeadapter as a singleton.

The following file creates an instance of UpgradeAdapter and exports it.

  1. // Angular 2 Vendor Import
  2. import {UpgradeAdapter} from '@angular/upgrade';
  3. import {NgModule, forwardRef} from '@angular/core';
  4. import {BrowserModule} from '@angular/platform-browser';
  6. // Instantiate an adapter with the AppModule
  7. // Use forwardRef to pass AppModule reference at runtime
  8. export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
  10. @NgModule({
  11.   declarations: [],
  12.   providers: [],
  13.   imports: [BrowserModule]
  14. })
  15. export class AppModule {
  16. }

The following file bootstraps an Angular 1/2 hybrid application:

  1. // Import the upgradeAdapter singleton
  2. import {upgradeAdapter} from './upgrade-adapter';
  4. // Name the application
  5. const APPNAME = 'angular-upgrade-example';
  7. // Register classic Angular 1 modules
  8. angular.module(APPNAME, []);
  10. // Bootstrap Angular 2 - *note* this is asynchronous
  11. upgradeAdapter.bootstrap(document.body, [APPNAME], {strictDi: true});

The above example does not actually do anything other than bootstrap an empty application.

Upgrading/Downgrading Components

Once bootstrapping is complete, Angular 1.x components can be upgraded towork with Angular 2. Conversely, Angular 2 components can be downgraded towork with Angular 1.x.

原文: https://angular-2-training-book.rangle.io/handout/migrate/ng-upgrade/bootstrap.html