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

Предпосылки

Прежде чем использовать схему, убедитесь, что ваш проект соответствует следующим требованиям:

  1. В проекте используется Angular 15.2.0 или более поздняя версия.
  2. Проект собирается без ошибок компиляции.
  3. Вы находитесь в чистой ветке Git, и вся ваша работа сохранена.

Варианты схемы

Схема миграции Angular предоставляет следующие параметры:

  • режим: задает преобразование, которое необходимо выполнить. Доступны различные режимы миграции, которые мы подробно обсудим позже.
  • путь: определяет путь для миграции относительно корня проекта. Вы можете использовать эту опцию для постепенной миграции определенных разделов вашего проекта.

Шаги миграции

Процесс миграции состоит из трех шагов, которые вам нужно выполнить несколько раз, чтобы убедиться, что ваш код строится и ведет себя должным образом на каждом этапе. Важно отметить, что схема может автоматически обновлять большую часть кода, но в некоторых случаях может потребоваться ручное вмешательство. Кроме того, новый код, сгенерированный схемой, может не соответствовать правилам форматирования вашего кода.

Выполните следующие действия, чтобы перевести проект Angular в автономный режим:

Запустите следующую команду, чтобы выполнить схему миграции:

ng generate @angular/core:standalone

Выберите параметр «Преобразовать все компоненты, директивы и каналы в автономные».

Запустите схему миграции еще раз:

ng generate @angular/core:standalone

На этот раз выберите опцию «Удалить ненужные классы NgModule».

Запустите схему миграции еще раз:

ng generate @angular/core:standalone

Выберите вариант «Загрузить проект с помощью автономных API».

Выполните все необходимые проверки линтинга и форматирования, исправьте все сбои и зафиксируйте полученные изменения.

После миграции

Поздравляем! Ваше приложение Angular успешно преобразовано в автономное. Вот несколько дополнительных дополнительных шагов, которые вы можете рассмотреть:

  1. Найдите и удалите все оставшиеся объявления NgModule: возможно, миграция не сможет автоматически удалить все объявления NgModule. Вручную удалите все оставшиеся объявления.
  2. Запустите модульные тесты проекта и исправьте любые сбои.
  3. Запустите любые средства форматирования кода. Если в вашем проекте используется автоматическое форматирование кода, запустите необходимые инструменты, чтобы убедиться, что ваш код соответствует правилам форматирования.
  4. Запустите все линтеры в своем проекте и исправьте все новые предупреждения. Некоторые линтеры могут поддерживать флаг --fix, который может автоматически разрешать определенные предупреждения.

Режимы миграции

Схема миграции Angular предоставляет следующие режимы:

Преобразование объявлений в автономные

В этом режиме миграция преобразует все компоненты, директивы и каналы в автономные, устанавливая standalone: true и добавляя зависимости в их массив импорта. Однако NgModules, которые загружают компонент, не преобразуются на этом шаге, так как они обычно являются корневыми модулями, используемыми bootstrapModule вместо автономных совместимых bootstrapApplication. Преобразование этих объявлений происходит автоматически как часть шага «Переключиться на автономный API начальной загрузки».

Удалить ненужные модули NgModules

После преобразования всех объявлений в автономные многие модули NgModules можно безопасно удалить. На этом шаге удаляются объявления модулей, которые соответствуют определенным критериям, таким как отсутствие объявлений, поставщики, компоненты начальной загрузки, импорт, ссылающийся на символ ModuleWithProviders, или модули, которые нельзя удалить. Если миграция не может удалить ссылку автоматически, она оставляет комментарий TODO для удаления вручную.

Переключиться на автономный API начальной загрузки

Этот шаг включает в себя преобразование использования bootstrapModule в новый автономный bootstrapApplication. Он также переключает корневой компонент на standalone: true и удаляет корневой NgModule. Если у корневого модуля есть провайдеры или импорты, миграция пытается перенести как можно больше этой конфигурации в новый вызов начальной загрузки.

Общие проблемы

В процессе миграции вы можете столкнуться с некоторыми распространенными проблемами, которые могут повлиять на функциональность схемы. Вот несколько вопросов, о которых следует знать:

  1. Ошибки компиляции: если ваш проект содержит ошибки компиляции, Angular не сможет правильно его проанализировать и перенести. Перед запуском схемы миграции устраните все ошибки компиляции.
  2. Файлы, не включенные в tsconfig: Схема миграции определяет, какие файлы следует перенести, анализируя tsconfig.json файлов проекта. Убедитесь, что все соответствующие файлы включены в файлы tsconfig, чтобы они учитывались во время миграции.
  3. Код, который не может быть проанализирован статически: схема основана на статическом анализе, чтобы понять ваш код и внести необходимые изменения. Если есть классы с метаданными, которые нельзя статически проанализировать во время сборки, миграция может их пропустить. Убедитесь, что ваш код можно статически проанализировать для получения точных результатов миграции.

Ограничения

Из-за сложности процесса миграции в некоторых случаях схема не может справиться. Вот несколько ограничений, о которых следует помнить:

Модульные тесты. Модульные тесты не компилируются с опережением времени (AoT), поэтому импорт, добавленный к компонентам в модульных тестах, может быть не совсем корректным после переноса.

Пользовательские оболочки для API Angular. Схема миграции основана на прямых вызовах API Angular и может не распознавать пользовательские оболочки для этих API. Например, если вы определили пользовательскую функцию, обертывающую TestBed.configureTestingModule, компоненты, объявленные в ней, могут не распознаваться во время миграции.

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