ngUpgrade (UpgradeModule)

ngUpgrade es el paquete oficial de Angular, @angular/upgrade, que permite que AngularJS y Angular corran en una misma aplicación y usen componentes y servicios del otro.

ngUpgrade es el nombre común del paquete @angular/upgrade/static. Su pieza central es UpgradeModule. Lo importas en el módulo raíz de Angular y lo usas para iniciar la aplicación AngularJS existente desde Angular. A partir de ahí los dos frameworks corren juntos, con la inyección de dependencias y la detección de cambios conectadas.

El paquete ofrece herramientas en ambas direcciones:

• downgradeComponent y downgradeInjectable permiten usar código Angular desde AngularJS.
• UpgradeComponent envuelve un componente AngularJS para que un template Angular pueda usarlo.
• Los servicios AngularJS se pueden proveer a Angular con una factory que los lee desde $injector.

Ejemplo

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({ imports: [BrowserModule, UpgradeModule] })
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['legacyApp'], { strictDi: true });
  }
}

Hay que quitar el atributo ng-app del HTML, porque ahora Angular es quien inicia AngularJS.

Confusión frecuente

ngUpgrade no convierte código. Es un puente en tiempo de ejecución, y cada controller, directiva y servicio igual tiene que reescribirse, a mano o con una herramienta.

También espera cierta forma en el código AngularJS. Las aplicaciones que usan componentes, controllerAs y un bundler de módulos son mucho más fáciles de conectar que las construidas sobre herencia de $scope y etiquetas script. Normalmente hay un trabajo de preparación antes. Los pasos están en Cómo migrar de AngularJS a Angular sin downtime.

Términos relacionados

• Aplicación híbrida (AngularJS + Angular)
• Downgrade (downgradeComponent / downgradeInjectable)
• Migración incremental