Гибрид AngularJS + Angular (v6) (наконец-то!)

Пришло время, чтобы это произошло! Я управляю и поддерживаю веб-сайт уже около 2,5 лет. Этот веб-сайт создан с использованием AngularJS (v1.6.9). Это работает достаточно хорошо, но ничто по сравнению с более новыми версиями Angular. Итак, я, наконец, сделал первые шаги по постепенному переносу всего на более новую версию. Вот как я это сделал:

Создайте новый проект Angular CLI
Скопируйте и конвертируйте все файлы JavaScript в TypeScript
Замена абсолютного URL-адреса шаблона в относительном URL-адресе
Настройка параметров Angular CLI для соответствия AngularJS
Включение AngularJS в ваше приложение Angular

Создайте новый проект Angular CLI

Поскольку никто не хочет изобретать велосипед, следуйте этому официальному руководству по созданию нового проекта: https://angular.io/guide/quickstart

Скопируйте и конвертируйте все файлы JavaScript в TypeScript

Может показаться, что это довольно просто, что было… вначале, но это больше, чем просто изменение расширения файла. Чтобы переименовать все файлы с «.js» в «.ts», вы можете делать все, что захотите. Вы можете сделать это вручную, с помощью расширения NPM или через свой Терминал. Я решил использовать расширение NPM: Renamer. Если вы хотите использовать то же самое, выполните следующие команды:

npm i -g renamer

и фактически переименовать файлы:

renamer --find '.js' --replace '.ts' 'root/folder/of/app/**/*.js'

Это приведет к переименованию всех ваших файлов JavaScript в файлы TypeScript. Затем, если вы еще не работаете с ES6 / ES2015, вам нужно преобразовать свой Javascript в этот формат. TypeScript не работает с функциями без стрелок. Кроме того, вы захотите начать использовать директивы JavaScript «import» и «export» вместо «require». Это поможет Webpack (встроенному в Angular CLI) создать ваше приложение позже.

После того, как вы переименовали и переписали свой код, вы можете скопировать его в проект Angular CLI, который вы создали ранее. Следуйте следующему руководству, от Создание цепочки импорта до Настроить Angular CLI: Создание гибрида. На этом этапе у вас должны быть все ваши файлы в формате TypeScript и интегрированы в ваш новый проект Angular CLI.

Замена абсолютного URL-адреса шаблона в относительном URL-адресе

На этом этапе вы уже можете начать компилировать свое приложение, но вы столкнетесь с ошибками, если используете абсолютный URL-адрес шаблона, как я. Angular CLI использует Webpack для компиляции файлов TypeScript в Javascript, а затем в пакет. Webpack требует, чтобы вы использовали относительные пути. Итак, теперь замените все ваши абсолютные пути к шаблонам относительными. Они могут находиться в директивах (или компонентах) вашего маршрутизатора или любых контроллеров.

Настройка параметров Angular CLI для соответствия AngularJS

На этом этапе вы сможете полностью скомпилировать гибридное приложение, но только для целей разработки. Как только вы попытаетесь скомпилировать свое приложение с производственными флагами:

ng build --prod

Вы не сможете загрузить приложение в своем браузере. Это связано с тем, что Webpack будет пытаться разрешить все без исключения функции, чтобы скомпилировать их в базовый Javascript. Это работает для Angular (v6), но не для AngularJS. Чтобы исправить это, отредактируйте следующие настройки в вашем файле «angular.json»:

/*This is the old situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "serviceWorker": true
  }
}

/*And this is the new situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": false, //Updated, remove this comment if you copy/paste
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false, //Updated, remove if copy/paste
    "serviceWorker": true
  }
}

Включение AngularJS в ваше приложение Angular

Ты почти сделал! Последний шаг - включить приложение AngularJS в новое блестящее приложение Angular. Вы можете сделать это, выполнив Bootstrap the hybrid для руководства, на которое я указал вам ранее: Make the hybrid. Если вы хотите иметь возможность использовать новые компоненты Angular в своем приложении AngularJS, выполните следующие действия: Обновление Angular. Это руководство также покажет вам, как вы можете использовать компоненты AngularJS в Angular, но я бы рекомендовал попробовать обновить как можно больше этих компонентов до Angular (v6). В какой-то момент их все равно придется обновить, так что это прекрасная возможность для этого!

Теперь вы, наконец, можете создать свое приложение для производственных целей! После того, как вы полностью конвертируете все в Angular (v6), вы снова сможете использовать AOT и оптимизатор сборки, что сделает ваше приложение еще более эффективным. Возможно, я допустил ошибку в собственном процессе, и поэтому AOT в настоящее время не работает, но для этого нужно будет дождаться исправления.

Примечания

Это руководство подойдет не всем, я лично использовал 3 или 4 разных руководства и даже больше запросов в Google, чтобы попасть в нужное место. Это обновление - не самое легкое, что вы когда-либо делали, но оно того стоит. Это значительно улучшит стабильность и надежность вашего приложения. Это также решит любые проблемы SEO, которые могут возникнуть с AngularJS, потому что Angular действительно может выполнять рендеринг на сервере (node)!

Если у вас есть какие-либо вопросы или, что еще лучше, предложения о том, как я могу упростить этот процесс для вас и меня, пожалуйста, оставьте комментарий. Я хотел бы помочь вам или поучиться на вашем опыте выполнения этого адского обновления! Если вы хотите узнать больше о моей борьбе с Angular и SEO, посмотрите: Как проиндексировать одностраничное приложение, созданное на AngularJS.

Гибрид AngularJS + Angular (v6) (наконец-то!)