Переход с AngularJS на Angular7 через гибридное приложение

Задача не самая простая, но выполнимая.

С ней я столкнулась при переходе в новую компанию.

О том, что она выполнима, можно узнать из руководства.

Оно было создано специально для упрощения перехода без необходимости создания нового проекта и переписывания каждого компонента с самого начала.

По задумке разработчиков, наш проект должен начать работать как на AngularJS, так и на Angular новой версии с постепенной заменой кода.

Так я и решила поступить.

Руководство довольно подробное, но в основном содержит теоретическую часть.

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

Основная сложность для меня заключалась в том, что структура проектов на AngularJS и Angular7 отличается.

Отсюда необходимость переписывать все зависимости вручную, сервисы и компоненты.

По сути, любая гибридность при таком подходе теряет смысл, поскольку приложение в любом случае приходится переписывать полностью.

Так я и поступила в начале, не найдя менее затратного способа.

Однако, есть вариант получше.

Здесь я нашла много полезного.

Опишу подробно то, что я делала.

Нужно создать новый проект.

В Node.js:

npm install -g @angular/cli

Устанавливаем Angular глобально.

Далее нужно создать папку для приложения и перейти в нее через Node.js.

Основные команды, которые здесь могут потребоваться для поиска нужной папки:

cd имя_папки и cd .. для возврата на директорию выше.

Итак, когда папка проекта найдена, нужно в ней создать проект.

В Node.js пишем:

ng new имя_проекта

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

Когда приложение создано, открыть его в браузере можно командой:

ng serve --open

Однако, открывать пока нечего.

Сейчас нужно установить зависимости, которые необходимы для работы как AngularJS, так и Angular:

npm install --save @angular/upgrade

С этого момента приложение поддерживает оба фреймворка.

Теперь открываем старый проект, ищем файл package.json.

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

Их нужно установить вручную.

Например:

npm install --save angular @uirouter/angularjs

После этого этапа можно перенести все глобальные стили в новое приложение.

Теперь переносим все файлы из app.

По указанному выше руководству идем далее.

Изменяем имя корневого компонента.

В app.module.ts добавляем строчку:

import * as angular from 'angular';

Это не указано в руководстве, но без нее гибридности не добиться.

Теперь у нас есть приложение, которое по идее должно быть гибридным.

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

Если их не возникает, идем дальше и меняем модуль за модулем AngularJS на Angular нужной версии.

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

Шаг за шагом, и у вас не останется ни одной строчки на AngularJS.