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

По словам команды Angular, не рекомендуется напрямую обновляться с версии 4 до версии 6. Поэтому в этой статье основное внимание уделяется обновлению до версии 5.

Команда Angular обещает, что обновление с Angular 6 и последующих версий будет легче и проще.

Предпосылки

Убедитесь, что вы используете последнюю версию Swagger. Angular 5 не рекомендует OpaqueToken, и теперь вместо него используется InjectionToken.

OpaqueToken - это уникальное и неизменяемое значение, которое позволяет разработчикам избегать конфликтов идентификаторов токенов DI. InjectionToken ‹T› - это параметризованная и безопасная по типу версия OpaqueToken.

Мы используем swagger-codegen-maven-plugin версии 2.2.2. Из-за вышеупомянутой проблемы нам пришлось перейти на 2.3.1.

Внутри файла maven pom.xml нам пришлось изменить языковой атрибут swagger yml с «typescript-angular2» на «typescript-angular», который с этого момента должен поддерживать все версии angular.

В Swagger 2.2.2 BASE_PATH создается как:

В отличие от Swagger 2.3.1, который поддерживается Angular 5:

Обратите внимание, что есть еще одно существенное различие между версиями Swagger в отношении сгенерированного файла. Например, если у нас есть файл dogResource.java, содержащий все виды вызовов REST, Swagger 2.2.2 сгенерирует dogApi.ts. В то время как Swagger 2.3.1 сгенерирует его как услугу. Имеется в виду dog.service.ts.

После обновления до последней версии swagger необходимо провести рефакторинг импорта, чтобы использовать dog.service.ts вместо dogApi.ts.

Давай начнем

Наша серверная часть написана на Java, а наша клиентская часть написана с использованием Angular 4. Мы используем swagger, который создает файл yaml, который использует спецификацию OpenApi.

Это стандартный интерфейс RESTful API, который позволяет понять возможности службы без доступа к исходному коду. (Https://swagger.io/specification/).

Затем мы генерируем файлы Typescript (содержащие объекты и API) из исходного файла yaml. Вы можете поиграть с их генератором здесь.

ШАГ 1. Обновите узел и npm до последних версий. Мы использовали npm 6.1 с узлом 10.0. Вы можете скачать их здесь.

ШАГ 2. Обновите файл package.json, используя:

Обновление NgRx и необходимый рефакторинг

Использование NgRx не обязательно, но я настоятельно рекомендую это сделать. Если вы не используете NgRx, вы можете перейти к следующему шагу.

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

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

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

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

Также мы заметили, что мы не можем использовать наблюдаемый $ .select, и мы должны обернуть его операцией «pipe»:

Исправление модульных тестов

Чтобы использовать новый механизм магазина, вам необходимо создать имитационный класс магазина:

Чтобы использовать его в тесте, сделайте следующее:

Магазин будет имитацией предоставленного состояния! С его помощью мы можем имитировать любые состояния!

Заключительные слова

Хотя сначала это может показаться пугающим, шаги, которые я описал, просты и не очень сложны. Если у вас возникнут какие-либо проблемы, напишите мне по адресу: markgrichanik [at] gmail [dot] com.

Я также хотел бы услышать ваши отзывы при обновлении приложений Angular с помощью Swagger и NgRx.

Если вам понравилась эта статья, то 👏 прочь, чтобы ее могли прочитать и другие.