Переход с 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.