Как мигрировать с AngularJS на Angular?angular-85

Миграция с AngularJS на Angular - сложный процесс, который требует тщательного планирования. Angular предоставляет официальный инструмент ngUpgrade, позволяющий делать это постепенно. Вот пошаговый подход:

1. Подготовка к миграции

npm install @angular/upgrade @angular/core @angular/common @angular/compiler @angular/platform-browser --save
  • Анализ приложения: Составьте инвентаризацию всех компонентов, сервисов, директив и фильтров
  • Обновите AngularJS до последней версии (1.7+)
  • Переведите на TypeScript: Начните использовать модули и классы

2. Гибридный режим

Основные шаги для запуска AngularJS и Angular вместе:

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

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

3. Постепенная миграция компонентов

Миграция сервисов

  1. Перепишите сервис на Angular
  2. Зарегистрируйте его как AngularJS-сервис:
export function myServiceFactory(injector: Injector) {
  return injector.get(MyService);
}

angular.module('myApp')
  .factory('myService', downgradeInjectable(MyService));

Миграция компонентов

  1. Создайте Angular-компонент
  2. Зарегистрируйте его в AngularJS:
angular.module('myApp')
  .directive('myComponent', downgradeComponent({ component: MyComponent }));

4. Миграция маршрутизации

Используйте ngUpgrade для параллельной работы двух роутеров:

const hybridRouter = new UpgradeModule(this.injector);
this.ngZone.run(() => {
  hybridRouter.bootstrap(
    document.body,
    ['angularJsApp'],
    { strictDi: true }
  );
});

5. Полный переход на Angular

  1. Постепенно заменяйте все AngularJS-компоненты
  2. Удалите AngularJS-зависимости
  3. Перепишите тесты на Angular-стиль
  4. Удалите ngUpgrade и AngularJS

Критические моменты

  1. Изменения в биндингах:

    • ng-model → [(ngModel)]
    • ng-click → (click)
    • ng-repeat → *ngFor

  2. DI система: Angular использует иерархические инжекторы

  3. Изменение жизненного цикла: Нет $scope.$watch, используйте OnChanges

Инструменты для миграции

  1. Angular CLI: для создания новой структуры
  2. ngMigration Assistant: анализ AngularJS-кода
  3. codelyzer: проверка стиля кода

Оптимизация после миграции

  1. Включите Ivy
  2. Оптимизируйте бандлы
  3. Внедрите Lazy Loading

Резюмируем

Миграция требует поэтапного подхода с использованием ngUpgrade. Начните с сервисов, затем компоненты, и наконец маршрутизацию. Тестируйте каждый шаг и используйте инструменты для автоматизации.

Вопросы

Собеседования