Что такое NgUpgrade?

NgUpgrade — это библиотека, которая позволяет интегрировать AngularJS (1.x) и Angular (2+) приложения. Это полезно для команд, которые хотят мигрировать старые приложения на AngularJS к более современному подходу с Angular без необходимости переписывать всё приложение сразу. Этот подход позволяет вам постепенно обновлять ваше приложение, что значительно снижает риски и упрощает процесс.

Как это работает?

NgUpgrade использует специальный механизм для связывания компонентов и сервисов AngularJS и Angular. Вы можете вызывать компоненты Angular из AngularJS и наоборот. Это позволяет использовать новые возможности и улучшения Angular в старом приложении, что делает миграцию более плавной.

Основные шаги для настройки NgUpgrade

1. Установка библиотек: Убедитесь, что у вас установлены @angular/upgrade и @angular/upgrade-static. Вы можете установить их через npm:

   npm install @angular/upgrade @angular/upgrade-static --save
   

2. Настройка модуля: В вашем основном модуле (обычно это app.module.ts для Angular) вам нужно импортировать NgUpgrade и зарегистрировать ваш AngularJS модуль.

   import { UpgradeModule } from '@angular/upgrade/static';
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { downgradeModule } from '@angular/upgrade/static';
   
   declare var angular: any; // Убедитесь, что вы включили AngularJS
   
   // Ваш angularjs модуль
   const angularjsApp = angular.module('myApp', []);
   
   @NgModule({
     imports: [BrowserModule],
     providers: [],
     bootstrap: [] // Указать, что мы используем bootstrap через NgUpgrade
   })
   export class AppModule {
     constructor(private upgrade: UpgradeModule) {}
     ngDoBootstrap() {
       this.upgrade.bootstrap(document.body, ['myApp']); // Замените 'myApp' на имя вашего AngularJS модуля
     }
   }
   
   // Запускаем приложение
   platformBrowserDynamic().bootstrapModule(AppModule);
   

3. Даунинг компонентов и сервисов: Чтобы использовать Angular компоненты и сервисы в AngularJS, вы можете использовать downgradeComponent и downgradeInjectable.
   Пример даунгрейд компонента:

   import { Component } from '@angular/core';
   import { downgradeComponent } from '@angular/upgrade/static';
   
   @Component({
     selector: 'my-angular-component',
     template: `<h1>Hello from Angular Component!</h1>`
   })
   export class MyAngularComponent {}
   
   angular.module('myApp').directive(
     'myAngularComponent',
     downgradeComponent({ component: MyAngularComponent }) as angular.IDirectiveFactory
   );
   

4. Вызов AngularJS из Angular: Вы можете вызывать AngularJS сервисы из компонентов Angular, используя UpgradeModule.

   import { UpgradeModule } from '@angular/upgrade/static';
   
   export class MyAngularComponent {
     constructor(private upgrade: UpgradeModule) {
       const angularService = this.upgrade.injector.get('angularService'); // Замените на имя вашего сервиса
       angularService.someMethod();
     }
   }
   

Заключение

NgUpgrade — это мощный инструмент для миграции приложений с AngularJS на более современный Angular. Он позволяет создавать гибридные приложения, которые используют лучшие возможности обоих фреймворков, что делает процесс миграции более управляемым и менее рискованным. Используя NgUpgrade, вы можете постепенно обновлять своё приложение, не теряя функциональности и обеспечивая хорошее пользовательское взаимодействие на всех этапах миграции.