Миграция с AngularJS на Angular7 через гибридное приложение

Переход с 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.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 7

    –1
    Я бы мигрировался как было задумано разрабами:
    AngularJs -> Angular2, Angular2 -> Angular4, Angular4 -> Angular5, 5 -> 6, 6 -> 8.
    Если сразу все автоматом мигрировать — то не будет ясно почему та или иная вещь исчезла, deprecated и т.п.
      0
      Никто из разрабов такого не задумывал.
        0
        rtfm image
          0
          Это migration notes между версиями ангуляра начиная с 2.0.
          Процесс миграции что с 1.0 на 2.0, что с 1.0 на 9 одинаков и представляет собой постепенное переписывание.
            –1
            Зачем вы мои слова переписываете своими? Вы диплом также писали?
            Как я обожаю людей, которые облажались, но продолжают укакиваться, что они самые правые.
      0
      Была в свое время попытка гибридного перевода, в итоге переписали за 1-2 недели
        0
        А большое приложение было?

        Only users with full accounts can post comments. Log in, please.