Миграция legacy приложений

Legacy приложения часто построены на старых версиях AngularJS или на нестандартных фреймворках, что создаёт необходимость постепенной миграции к современному Angular. Процесс миграции требует системного подхода и понимания ключевых механизмов совместимости.

Использование Angular Upgrade

Angular предоставляет библиотеку @angular/upgrade, которая позволяет совмещать AngularJS и Angular в одном приложении. Основные шаги:

  1. Установка пакета:
npm install @angular/upgrade
  1. Инициализация приложения: создание модуля, который объединяет старые и новые компоненты.
  2. Объявление downgraded/upgraded компонентов: старые компоненты AngularJS можно оборачивать для использования в Angular и наоборот.
import { UpgradeModule } from '@angular/upgrade/static';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [UpgradeModule],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}
  
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['legacyApp']);
  }
}

Модульная миграция

Лучшей практикой является постепенная миграция по модулям:

  • Выделение из legacy приложения функциональных блоков.
  • Переписывание блоков на Angular с сохранением интерфейсов.
  • Интеграция новых модулей через downgraded сервисы или компоненты.

Работа с сервисами

Сервисы AngularJS и Angular можно соединять через механизм downgradeInjectable и upgrade.injector. Пример:

import { downgradeInjectable } from '@angular/upgrade/static';
import { Injectable } from '@angular/core';

@Injectable()
export class NewService {
  getData() { return 'данные'; }
}

angular.module('legacyApp')
  .factory('NewService', downgradeInjectable(NewService));

Управление маршрутизацией

Routing требует отдельного внимания, так как AngularJS использует $routeProvider или ui-router, а Angular — RouterModule. Рекомендуется:

  • Поддерживать старые маршруты через AngularJS.
  • Постепенно заменять на Angular Router с перенаправлением через upgradeModule.

Стратегии тестирования

После интеграции необходимо убедиться в корректности работы:

  • Unit-тесты для новых Angular компонентов.
  • E2E-тесты для проверки совместной работы legacy и новых частей.
  • Постепенное удаление AngularJS после полной миграции модулей.

Рекомендации по производительности

  • Использовать lazy-loading для новых модулей.
  • Минимизировать использование $scope и $digest после интеграции.
  • Оптимизировать взаимодействие сервисов между AngularJS и Angular.

Миграция legacy приложений требует тщательного планирования и поэтапного подхода, обеспечивающего непрерывную работу приложения при переходе на современный Angular.

Оглавление