Проблемы с обновлением Angular CLI: обновите проект Angular вручную

В последнее время я столкнулся с некоторыми очень странными проблемами с функцией командной строки Angular. Глобальное обновление со старой версии 1.x.x до последней версии 7.x.x (на момент написания) было абсолютным кошмаром для моей машины MacOS, и это проблема, которую я до сих пор не могу решить.

По мере того как я продолжаю бороться за то, чтобы Angular CLI и моя машина работали в блаженной гармонии, я нашел несколько обходных путей для создания Angular проекта с последними наворотами, несмотря на то, что я использовал более старую версию CLI. Давайте начнем…

ПРИМЕЧАНИЕ. Это решение основано на моей собственной борьбе с инструментом Angular CLI, поэтому некоторые детали (например, версии) могут быть изолированы от моей собственной настройки.

ШАГ 1. Установите Angular CLI

Давайте выполним новую установку Angular CLI, выполнив следующие 3 команды:

npm uninstall -g angular-cli
npm cache verify
npm install -g @angular/cli@latest

Это удалит старую версию, которая у вас может быть, и установит последнюю. Ничего сложного, красивого и понятного!
Выполните следующую команду, чтобы узнать, какая версия установлена ​​в вашей среде NPM:

npm ls -g @angular/cli

На момент написания вы должны увидеть версию 7.x.x. Это правильная версия. Здесь возникает первая проблема — хотя в среде NPM отображается последняя версия (7.x.x), при создании нового проекта будет использоваться старая версия (1.x.x), которую мы только что удалили. Поэтому, когда мы создаем новый проект, мы получаем старую версию ядра angular и другие пакеты.

ШАГ 2: Создание нашего проекта

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

ng --version

См. также:  Типы накопительных сборок: критическая ошибка "Неожиданный токен"

Обратите внимание, что версия показывает 1.x.x, а не 7.x.x. Это означает, что когда мы приступаем к созданию проекта, он предоставит нам устаревшую инфраструктуру angular.

К черту, давайте все равно сгенерируем наш проект Angular с помощью интерфейса командной строки:

ng new my-angular-project && cd my-angular-project

Когда наш проект Angular настроен, давайте взглянем на наш package.json файл, чтобы увидеть, что происходит:

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

Обратите внимание, что версии Angular Core и CLI отличаются, и мы можем увидеть некоторые дополнительные пакеты, которых нет в устаревшей версии. Кроме того, если мы запустим ng serve для запуска нашего приложения, оно выдаст ошибку!

Это совсем не годится … Думаю, нам придется делать всю грязную работу самим …

ШАГ 3: Обновление нашего проекта до последней версии

В нашем package.json файле найдите "@angular/cli":"1.x.x" и обновите его на "@angular/cli":"^1.x.x". Сохраните файл и запустите:

npm update

Это обновит модули узлов проекта и вернет к жизни наши основные команды!

Далее запускаем:

ng serve

И вот! У нас есть всплывающая страница Angular! Работает как шарм!

Мы только что обновили интерфейс командной строки. В нашем проекте все еще используется более старая версия ядра Angular, а также некоторые другие старые пакеты. Нам просто нужно запустить еще несколько команд, чтобы обновить все остальное.

Вернувшись в наш терминал, выполните одну за другой следующие команды:

ng update @angular/cli @angular/core
npm update
ng serve

Если ng serve по-прежнему выдает ошибки, попробуйте снова обновить интерфейс командной строки, выполнив следующие команды:

ng update @angular/cli
ng serve

Теперь на вашем package.json установлены самые свежие пакеты, и все должно работать как надо! Вот и все!

См. также:  Node.js везде с переменными окружения!

Заключение

Я надеюсь, что это будет полезно для всех, кто оказался в таком же странном затруднительном положении. Я надеюсь найти более эффективное и оптимизированное решение этой проблемы в ближайшем будущем.

Angular — фантастический фреймворк, но по сравнению с их альтернативами (например, create-react-app, Vue CLI) их инструменты начальной загрузки могут быть улучшены.

Дайте мне знать в комментариях, если у вас есть что добавить, я искренне приветствую отзывы и альтернативные решения от сообщества!

P.S. Мы нанимаем! Panya Studios всегда ищет талантливых и увлеченных людей, которые присоединятся к нашей растущей команде в Бангкоке, Таиланд. Ознакомьтесь с нашими текущими вакансиями на https://studios.panya.me/

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: