В последнее время я столкнулся с некоторыми очень странными проблемами с функцией командной строки 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 установлены самые свежие пакеты, и все должно работать как надо! Вот и все!
Заключение
Я надеюсь, что это будет полезно для всех, кто оказался в таком же странном затруднительном положении. Я надеюсь найти более эффективное и оптимизированное решение этой проблемы в ближайшем будущем.
Angular — фантастический фреймворк, но по сравнению с их альтернативами (например, create-react-app, Vue CLI) их инструменты начальной загрузки могут быть улучшены.
Дайте мне знать в комментариях, если у вас есть что добавить, я искренне приветствую отзывы и альтернативные решения от сообщества!
P.S. Мы нанимаем! Panya Studios всегда ищет талантливых и увлеченных людей, которые присоединятся к нашей растущей команде в Бангкоке, Таиланд. Ознакомьтесь с нашими текущими вакансиями на https://studios.panya.me/
