Как обновить Angular 6 до 7 новые функции и преимущества последней версии

Содержание материала:

Как обновить Angular CLI до последней версии

С помощью ng —version Я получил:

которая не является последней доступной версией.

Поскольку в моей системе глобально установлен Angular CLI, для его обновления я попытался:

npm update angular-cli -g

Но это не работает, потому что он остается до версии 1.0.0.

10 ответов

Прочитав некоторые проблемы, о которых сообщалось в репозитории GitHub, я нашел решение.

Чтобы обновить глобально установленный в вашей системе пакет angular-cli, вам необходимо запустить:

В зависимости от вашей системы, вам может потребоваться добавить префикс вышеупомянутых команд sudo ,

Кроме того, скорее всего, вы также хотите обновить локальную версию проекта, потому что внутри вашей директории проекта она будет выбрана с более высоким приоритетом, чем глобальная:

спасибо grizzm0 за указание этого на GitHub.

После обновления CLI вы, вероятно, захотите обновить и версию Angular.

Примечание: если вы обновляете до Angular CLI 6+ от более старой версии, вам может потребоваться прочитать это.

Изменить: Кроме того, если вы все еще были на 1.x версии Cli, вам необходимо преобразовать angular-cli.json в angular.json , что вы можете сделать с помощью следующей команды:

(проверьте это для более подробной информации).

нг6+ -> 7,0

Обновление RxJS (зависит от RxJS 6.3)

Затем обновите основные пакеты и Cli:

(Необязательно: обновите Node.js до версии 10, которая поддерживается в NG7)

ng6 + (Cli 6.0+): функции упрощенных команд

Во-первых, обновите свой Cli

Затем обновите ваши основные пакеты

Если вы используете RxJS, запустите

Он обновит RxJS до версии 6 и установит rxjs-compat пакет под капотом.

Если вы столкнулись с ошибками сборки, попробуйте установить вручную:

Наконец, проверьте свою версию

Примечание к сборке:

ng6 больше не использует intl в polyfills.ts

ng5+ (Cli 1.5+)

  1. Поддерживаемая версия Typescript для Cli 1.6 на момент написания статьи до 2.5.3.
  2. Использование @next обновляет пакет до бета-версии, если доступно. Используйте @latest, чтобы получить последнюю не бета-версию.

После обновления как глобального, так и локального пакета очистите кеш, чтобы избежать ошибок:

Вот официальные ссылки:

  1. Обновление Кли
  2. Обновление основных пакетов.

Вы можете просто использовать

npm install -g angular-cli — если это ваш первый раз

npm install -g @angular/[email protected] — если вы уже установлены, так что для обновления

Мощная команда устанавливает и заменяет последний пакет.

У меня была похожая проблема. Я починил это.

Эта команда отлично работает:

Я сделал то, что он сказал, но мой пакет не обновил угловую версию, и я знаю, что этот пост о angular-cli Но я думаю, что это тоже может помочь.

  • так что после того, как @ShinDarth сказал выше, чтобы исправить мою угловую версию, мне пришлось создать новый проект с -ng new projectname это создало пакет.
  • скопируйте новый пакет, затем вставьте новый пакет во все пакеты проектов, нуждающиеся в обновлении (не забудьте добавить имеющиеся зависимости и изменить имя в первой строке), или вы можете просто изменить версии вручную без копирования и вставки.
  • затем беги -npm install ,

Теперь мой ng serve снова работает, может быть, есть лучший способ сделать все это, если кто-то знает, пожалуйста, поделитесь, потому что это боль делать со всеми проектами, которые нуждаются в обновлении.

Как правильно обновить Angular Project с V2 — > V7?

Мне поручено обновить средний проект Angular V2.0.1 до Angular V7.1.4 (последняя стабильная версия). В прошлом я много работал с Angular и обновился с V2 — > V4 и V4 — > V5 для другого проекта Angular в прошлом. Эти обновления не всегда были тривиальными и имели серьезные изменения. Проведя некоторые исследования, я наткнулся на Руководство по обновлению под углом (https://update.angular.io/), которое кажется хорошим началом. Я также наткнулся на ( Обновление Angular 2 до Angular 6 ) и в комментариях кто-то говорит, что я должен начать новый проект с использованием Angular CLI и переместить код вручную.

Еще одна вещь, которую стоит отметить, это то, что проект 2.0.1 использует systemjs (потому что он был создан из оригинального Angular Quickstart). В идеале мы должны переключиться на веб-пакет.

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

Angular, обновить компонент без перезагрузки

На одной странице присутствуют несколько routerLink , ведут на notes/:id :

В том же родительском компоненте в загружается компонент NoteView , который по id находит и выводит инфу. При переходе между ссылками id в адресной строке меняется но компонент не перезагружается, висит с тем id , который был открыт первым. Как заставить компонент обновляться каждый раз при переходе по другой ссылке? Event при каждом клике по ссылке и EventListner был бы слишком громоздким решением, таких компонентов будет несколько.

Как правильно обновить angular 2 (npm) до последней версии?

120 dragonmnl [2020-04-13 15:03:00]

и остановился на Angular 2 beta 8. Теперь я возобновил учебник, и последняя бета-версия — бета-версия 14.

Если я просто обновляю npm, обновляется несколько модулей (предварительно загруженных с помощью учебника), но не Angular2 (я вижу, что с npm ls).

Если я выполняю обновление npm Angular 2 или npm update angular2 @2.0.0beta.14, он просто ничего не делает.

11 ответов

201 Решение Cosmin Ababei [2020-04-13 15:32:00]

Команда npm update -D && npm update -S обновит все пакеты внутри package.json до их последней версии, в соответствии с их определенный диапазон версий. Вы можете прочитать об этом здесь.

Если вы хотите обновить Angular от версии до 2.0.0-rc.1 , вам нужно вручную отредактировать package.json , так как Angular был разделен на несколько модулей npm. Без этого, поскольку angular2 указывает на 2.0.0-beta.21 , вы никогда не сможете использовать последнюю версию Angular.
Список с некоторыми из наиболее распространенных модулей, которые вам нужно для начала работы, можно найти в реестре быстрого запуска.

Примечания:

Прохладный способ оставаться в курсе последней версии своих пакетов — использовать npm outdated , который показывает вам все устаревшие пакеты вместе с их желаемой и последней версией.

Причина, по которой нам нужно связать две команды, npm update -D и npm update -S , должна преодолеть эту ошибку, пока она не будет исправлена,

53 Seven [2020-10-03 02:31:00]

Другим приятным пакетом, который я использовал для переноса бета-версии Angular2 в Angular2 2.0.0 final , является npm-check-updates

Он показывает последнюю доступную версию всех пакетов, указанных в вашем пакете. json. В отличие от npm outdated , он также способен редактировать ваш пакет .json, позволяя вам позже npm upgrade .

Установить

sudo npm install -g npm-check-updates

Использование

ncu для отображения

ncu -u для повторной записи вашего пакета .json

Обновите до последней версии Angular 5

Другие пакеты, устанавливаемые с помощью угловой npm install —save [email protected] [email protected] [email protected]

Угловые пакеты Dev: npm install —save-dev @angular/@latest

Типы пакетов Dev: npm install —save-dev @types/@latest

Установите последнюю поддерживаемую версию, используемую Angular cli (не делайте @latest): npm install —save-dev [email protected]

Переименуйте файл angular-cli.json в.angular-cli.json и обновите содержимое:

11 Kuncevič [2020-08-07 07:42:00]

ОБНОВИТЬ:
Начиная с CLI v6, вы можете просто запустить ng update для автоматического обновления ваших зависимостей до новой версии.

Иногда с помощью ng update вы можете добавить флаг —force . Если вы сделаете это, убедитесь, что версия машинописного текста, который вы установили таким образом, поддерживается вашей текущей угловой версией, в противном случае вам может потребоваться понизить версию машинописного текста.

Также ознакомьтесь с этим руководством Обновление ваших Angular проектов

Только для пользователей bash

Если вы работаете в Mac/Linux или запускаете bash в Windows (это не работает в Windows CMD по умолчанию), вы можете запустить этот oneliner:

Просто укажите версию, которую вы не хотите, например, @4.4.5, или введите @latest, чтобы получить последнюю версию

Проверьте ваш package.json только для того, чтобы убедиться, что вы обновляете все пакеты @angular/* , на которые опирается ваше приложение.

Топ-пост этого месяца:  Верстка нестандартного блока услуг. Часть 1
  • Чтобы увидеть точную @angular версию в вашем проекте, выполните:
    npm ls @angular/compiler или yarn list @angular/compiler
  • Чтобы проверить последнюю стабильную версию @angular доступную на npm, выполните:
    npm show @angular/compiler version

7 Kevin RED [2020-09-11 07:48:00]

Официальная страница npm предлагает структурированный метод для обновления угловой версии для глобальных и локальных сценариев.

1. Прежде всего, вам нужно удалить текущий угловой из вашей системы.

РЕДАКТИРОВАТЬ

Как отметил @candidj

npm cache clean переименовывается как npm cache verify npm с npm 5 onwards

3.Установить угловое глобальное

4. Настройка локального проекта, если у вас есть

Пожалуйста, проверьте то же самое по ссылке ниже:

Это решит проблему.

Если вы хотите установить/обновить все пакеты до последней версии, а вы работаете с окнами, вы можете использовать это в powershell.exe :

Если вы также используете cli , вы можете сделать это:

Это сохранит пакеты точные (-E), а пакеты cli в devDependencies (-D)

3 student [2020-10-10 21:02:00]

Альтернативный подход с использованием npm-upgrade:

Перейдите в папку проекта

Он спросит вас, хотите ли вы обновить пакет, выберите Да

Просто начните здесь:

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

Я рекомендую выбрать «Дополнительно», чтобы увидеть все шаги. Сложность — относительная концепция — и я не знаю, чьей глупой идеей была эта функция, но если вы выберете «Basic», она не покажет вам все необходимые шаги, и вы можете пропустить что-то важное, что использует ваше приложение «Basic»,

Начиная с версии 6 появляется новое ng update команды Angular CLI ng update которое интеллектуально проходит через ваши зависимости и выполняет проверки, чтобы убедиться, что вы обновляете правильные вещи 🙂

Шаги расскажут, как использовать его 🙂

npm uninstall —save -dev angular-cli

npm install —save -dev @angular/cli @latest

ng update @angular/cli

ng update @angular/core —force

ng update @угловой/материал или npm я @угловой /cdk @6 @угловой/материал @6 —save

0 SamYah [2020-01-06 11:50:00]

Лучший способ сделать это использовать расширение (pflannery.vscode-versionlens) в vscode.

это проверяет все требования и проверки для наилучшего соответствия.

у меня было много проблем с обновлением и поддержанием моего приложения, дополняющего unitll, я позволил verbose lense сделать чек, а затем я запускаю

для установки новых предполагаемых зависимостей.

0 Ernest [2020-01-21 17:41:00]

Если вы ищете меня, просто обновляющего ваш проект до последней версии, это то, что работает со мной после Angular 6:

Откройте консоль в папке вашего проекта: If you type: ng update вы получите следующее сообщение:

Поэтому я обычно иду прямо и делаю:

Наконец, вы можете проверить вашу новую версию:

Как обновить компонент в Angular

Я работаю над проектом Angular. Я борюсь с обновлением действия в компоненте.

Я хотел бы обновить компоненты маршрутизатора по нажатию кнопки. У меня есть кнопка обновления, когда я нажимаю на нее, компонент / маршрутизатор должен быть обновлен. Я пытался window.location.reload() и location.reload() , эти два не подходят для моих нужд. Пожалуйста, помогите, если кто-нибудь знает об этом.

8 ответов

После некоторого исследования и изменения моего кода, как показано ниже, скрипт работал для меня. Я просто добавил условие:

Добавление этого кода в конструктор необходимого компонента сработало для меня.

Обязательно unsubscribe из этой моей подписки в ngOnDestroy() .

Используйте this.ngOnInit (); , чтобы перезагрузить тот же компонент, вместо того, чтобы перезагрузить всю страницу !!

К счастью, если вы используете Angular 5.1+, вам больше не нужно реализовывать хак, так как была добавлена ​​нативная поддержка. Вам просто нужно установить onSameUrlNavigation для «перезагрузки» в параметрах RouterModule:

В моем приложении у меня есть компонент, и все данные поступают из API, который я вызываю в конструкторе компонента. Есть кнопка, с помощью которой я обновляю данные моей страницы. при нажатии кнопки я сохраняю данные в серверной части и обновляю данные. Поэтому перезагрузить / обновить компонент — в соответствии с моим требованием — это только обновить данные. если это тоже ваше требование, используйте тот же код, написанный в конструкторе компонента.

Другой способ обновить (сложным способом) страницу в угловом 2, например, это выглядит как f5

Это может быть достигнуто путем взлома, перейдите к некоторому образцу компонента, а затем перейдите к компоненту, который вы хотите перезагрузить.

Хотите обновить проект с Angular v5 до Angular v6

angular 6 install (9)

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

Поскольку Angular 6 уже здесь, я хочу обновить или переместить мое клиентское приложение angular 5 на angular 6, но я не получаю ни одного учебного пособия или чего-либо, что могло бы мне помочь.

По моему мнению, мне просто нужно запустить новый Angular CLI, а затем перенести мой старый источник в новый проект. Я читал, что Angular 6 использует новый рендерер под названием Ivy. Должен ли я изменить свой проект в соответствии с Айви?

Вот как я заставляю это работать.

Angular CLI Global: 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 2.5.3

Примечание. Чтобы включить ng Update , необходимо сначала установить Angular CLI 6.0 npm install -g @angular/cli or npm install @angular/cli

ng update //update Angular Package core/common/complier. to 6.0.0

ng update @angular/cli //change angular-cli.json to angular.json

необязательно, если у вас есть angular-material 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

ng update @angular/material //upgrade to 6.0.1

npm install @ngx-translate/[email protected] —save //upgrade ngX translate to 10.0.1 for Angular 6

npm install —save @ng-bootstrap/[email protected] //for ng-bootstrap 5 npm install —save @ng-bootstrap/[email protected] //for ng-bootstrap

Если вы используете Observable и получите ошибку:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module ‘rxjs-compat/Observable’. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module ‘rxjs-compat/observable/of’.

Изменение: import < Observable >from «rxjs/Observable»; import < of >from ‘rxjs/observable/of’; import < Observable >from «rxjs/Observable»; import < of >from ‘rxjs/observable/of’;

Мне пришлось перезапустить ng update @ angular / cli, чтобы angular-cli.json был изменен на angular.json

Обновление с Angular v6 до Angular v7

Версия 7 Angular была выпущена Официальная ссылка на блог Angular . Посетите официальное угловое руководство по обновлению update.angular.io для получения подробной информации. Эти шаги будут работать для базовых приложений Angular 6, использующих Angular Material.

Обновление с Angular v5 до Angular v6

Версия 6 Angular была выпущена Официальная ссылка на блог Angular . Ниже я упомянул общие шаги по обновлению, но до и после обновления вам нужно внести изменения в свой код, чтобы сделать его работоспособным в v6, для получения этой подробной информации посетите официальный сайт update.angular.io .

Шаги обновления (в основном взяты из update.angular.io по update.angular.io для базового приложения Angular, использующего Angular Material):

Убедитесь, что версия NodeJS 8.9+, если не обновите ее.

Обновите Angular Cli глобально и локально и перенесите старую конфигурацию .angular-cli.json в новый формат angular.json , выполнив следующее:

Обновите все ваши пакеты Angular Framework до v6 и верную версию RxJS и TypeScript, выполнив следующее:

Обновите Angular Material до последней версии, выполнив следующее:

RxJS v6 имеет существенные отличия от v5, v6 содержит пакет обратной совместимости rxjs-compat, который будет поддерживать работу ваших приложений, но вы должны реорганизовать код TypeScript, чтобы он не зависел от rxjs-compat. Для рефакторинга кода TypeScript выполните следующее:

Примечание. Как только все ваши зависимости обновятся до RxJS 6, удалите rxjs- compat, так как он увеличивает размер пакета. пожалуйста, смотрите это Руководство по обновлению RxJS для получения дополнительной информации.

Готово запустить ng serve чтобы проверить это.
Если вы получили ошибки в сборке, обратитесь к update.angular.io для получения подробной информации.

Обновление с Angular v5 до Angular 6.0.0-rc.5

Обновите rxjs до 6.0.0-beta.0, пожалуйста, обратитесь к Руководству по обновлению RxJS для получения дополнительной информации. В RxJS v6 произошли серьезные изменения, поэтому сначала сделайте ваш код совместимым с последней версией RxJS.

Обновите версию NodeJS до 8.9+ (это требуется для версии angular cli 6)

Обновите глобальный пакет Angular до следующей версии.

если версия npm npm cache clean

Измените версии угловых пакетов в файле package.json на ^6.0.0-rc.5

Затем обновите локальный пакет Angular до следующей версии и установите вышеупомянутые пакеты.

Формат конфигурации Angular CLI был изменен с версии angular cli 6.0.0-rc.2, и существующая конфигурация может быть обновлена ​​автоматически с помощью следующей команды. Он удалит старый конфигурационный файл .angular-cli.json и запишет новый файл angular.json .

ng update @angular/cli —migrate-only —from=1.7.4

Примечание: — Если вы получаете следующую ошибку «Угловой компилятор требует TypeScript> = 2.7.2 и

Посмотрите подробности пошагового обновления с Angular 5 до Angular 6. Здесь представлены подробные сведения о проблемах, с которыми вы столкнулись во время обновления, и о способах их устранения.

  • Обновите версию своего узла до 8 или выше и установите Angular cli latest глобально с помощью npm i -g @ angular / cli @ latest.
  • Angular 6 использует angular.json в качестве файла конфигурации вместо .anguar-cli.json. Также был изменен цлинт. Проверьте https://github.com/angular/angular-cli/wiki/angular-workspace для последних деталей конфигурации. Вы должны переместить любую существующую конфигурацию в новый файл конфигурации.
  • Для этого создайте еще один фиктивный проект с последним cli, используя ng new ‘your-project’ и те же значения по умолчанию, такие как префикс, стиль и т. Д., Которые вы использовали ранее для своего проекта. Создайте новый проект с помощью https://github.com/angular/angular-cli/wiki/new
  • Используйте update.angular.io чтобы проверить, что было изменено по сравнению с вашей текущей версией Angular → Angular 6. Он предоставляет способы их изменения / исправления.
  • Выполните действия, описанные выше, и скопируйте / обновите файл angular.json, созданный на шаге 2. Сделайте npm i в вашем проекте, чтобы получить все зависимости и выполните обновление npm
  • Теперь приходит большая часть. Обновление RxJS и разрешение конфликтов. В этом выпуске RxJS стандартизировал импорт операторов и создателей Observable. Сделайте npm i -g rxjs-tslint и добавьте ниже конфигурацию lint в tslint.json
  • Теперь запустите ng lint —fix. Это исправляет несколько пунктов, но большинство оставшихся проблем будут выделены, и вам придется исправить это вручную.
Топ-пост этого месяца:  Урок 15. Angular 4 NgRx. Эффекты

Изменение имени оператора:

Все операторы перемещены в rxjs / operator

Наблюдаемые методы создания перенесены в rxjs

Полное руководство

—————— С angular-cli —————————

1. Обновите CLI глобально и локально

Использование NPM (убедитесь, что у вас есть версия узла 8+)

npm uninstall -g @angular/cli npm cache clean npm install -g @angular/[email protected] npm i @angular/cli —save

yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. Обновление зависимостей

Angular 6 теперь зависит от TypeScript 2.7 и RxJS 6

Обычно это означает, что вы должны обновлять свой код везде, где используются импорт и операторы RxJS, но, к счастью, есть пакет, который берет на себя большую часть тяжелой работы:

Затем вы можете запустить rxjs-5-to-6-migrate

наконец удалите rxjs-compat

——————- Без угловых кли ————————-

Поэтому вы должны вручную обновить файл package.json .

Есть несколько шагов для обновления 2/4/5 до Angular 6.

Чтобы исправить проблему, связанную с «angular.json»: —

Надеюсь, это поможет вам 🙂

Пожалуйста, запустите комментарии ниже, чтобы обновить Angular 6 от Angular 5

  1. ng update @ angular / cli
  2. ng update @ angular / core
  3. npm установить rxjs-compat (для поддержки более старой версии rxjs 5.6)
  4. npm install -g rxjs-tslint (Чтобы изменить код из формата rxjs 5 на rxjs 6 в коде. Установите глобально, тогда будет работать только)
  5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (после установки мы должны изменить его в нашем исходном коде на формат rxjs6)
  6. npm удалить rxjs-compat (окончательно удалить это)

Как отметил Винай Кумар, он не будет обновлять глобально установленный Angular CLI. Чтобы обновить его глобально, просто используйте следующие команды:

Обратите внимание, что если вы хотите обновить существующий проект, вы должны изменить существующий проект, вам следует изменить package.json внутри вашего проекта.

В самом Angular нет никаких серьезных изменений, но они есть в RxJS, поэтому не забудьте использовать библиотеку rxjs-compat для работы с унаследованным кодом.

Как обновить проект Angular CLI?

angular-cli (6)

Переустановите (с пряжей)

Переустановите (с npm)

Другой способ — не использовать глобальную установку и добавить папку /node_modules/.bin в PATH или использовать сценарии npm. Обновление будет мягче.

Я пытаюсь обновить свой angular 2 проект с 2.0.0 до 2.4.1 . Я понимаю, что семантическое управление версиями было принято после выпуска 2.0.0 и выпуски 2.xx должны быть заменой. Мой опыт, кажется, указывает на обратное. Может быть, я просто не знаю, что я делаю, но я не нашел это простым .

Попытка 1 — обновление версии вручную

Моим наивным первым подходом было вручную обновить мои @angular зависимости. Вы можете сослаться на мой package.json ниже (обновление 1). Я внес эти изменения, затем npm install и получил несколько предупреждений, а затем получил следующую ошибку при попытке сделать ng serve .

Не удается прочитать свойство ‘AssetUrl’ из неопределенного

И мои предупреждения .

Поэтому я попытался исправить эти предупреждения, но я не знаю, как исправить все из них (например, @ ngtools / webpack), и некоторые из них, похоже, конфликтуют друг с другом. Поэтому я отказался от ручного подхода к обновлению моей угловой версии 2 .

Оригинальная упаковка.json

Обновление 1 файла package.json

Попытка 2 — использовать npm-check-updates

Поскольку, когда я пытался выбрать свои угловые зависимости для обновлений, я попал в паутину других зависимостей, которые нужно было обновить, я затем попытался просто обновить все.

Основываясь на этом ответе, я попробовал следующее:

Это прошло нормально, но когда я попробовал ng serve, я получил следующую ошибку:

ОШИБКА в AppModule не является NgModule

Используя информацию, собранную here , я понизил версию своей машинописи, эта ошибка исчезла, но появилась новая ошибка.

ОШИБКА в ошибке обнаружена при статическом разрешении значений символов. Ссылка на неэкспортированную функцию (позиция 29:10 в исходном файле .ts), разрешение символа restPaths в rest-paths.ts, разрешение символа AppModule в app.module.ts, разрешение символа AppModule в app.module.ts

Я боролся с этими ошибками, но тот факт, что у меня так много проблем, поднимает красные флаги.

Кто-нибудь может помочь? Я принимаю неправильный подход?

Обратите внимание, что я видел некоторые предложения по обновлению проектов angular-cli, которые рекомендуют удалить angular-cli и переустановить его, затем выполнить инициализацию ng и перезаписать ваши файлы конфигурации. Это не сработало для меня, потому что у меня уже была последняя версия.

Редактировать: утверждение о наличии последнего angular-cli было неверным. У меня была angular-cli version 1.0.0-beta.16 тогда как последняя на момент этого редактирования 1.0.0-beta.24 . Тем не менее я попытался обновить свой angular-cli и запустить ng init для моего существующего проекта. Теперь я замечаю, что не выполнил точно шаги, описанные на странице angular-cli github. Я пропустил npm install —save-dev [email protected] и уничтожил все свои node_modules вместо использования набросанной ими команды rm.

От ответа JJB я оказался на правильном пути, но модернизация прошла не очень гладко. Мой процесс подробно описан ниже. Надеемся, что в будущем процесс станет проще, и ответ JJB можно будет использовать или что-то еще более простое.

Детали решения

Я выполнил шаги, описанные в ответе JJB, чтобы точно обновить angular-cli. Однако после запуска npm install angular-cli была сломана. Даже попытка сделать ng version приведет к ошибке. Поэтому я не мог выполнить команду ng init . Смотрите ошибку ниже:

Чтобы иметь возможность использовать любые команды angular-cli, мне пришлось вручную обновить файл package.json и увеличить зависимости @angular до 2.4.1, а затем выполнить еще одну npm install .

После этого я смог сделать ng init . Я обновил мои файлы конфигурации, но ни один из файлов app / *. Когда это было сделано, я все еще получал ошибки. Первый подробно описан ниже, второй был того же типа ошибки, но в другом файле.

ОШИБКА в ошибке обнаружена при статическом разрешении значений символов. Вызовы функций не поддерживаются. Попробуйте заменить функцию или лямбду ссылкой на экспортированную функцию (позиция 62: 9 в исходном файле .ts), разрешив символ AppModule в C: / _ git / my-project / code / src / main / frontend / src / app /app.module.ts

Эта ошибка связана со следующим заводским провайдером в моем AppModule

Чтобы устранить эту ошибку, я использовал экспортированную функцию и внес следующие изменения в поставщика.

Резюме

Чтобы суммировать, что я понимаю, как наиболее важные детали, потребовались следующие изменения:

Обновите версию angular-cli, используя шаги, подробно изложенные в ответе JJB (и на их странице github).

Обновление @angular версии вручную, 2.0.0, похоже, не поддерживается angular-cli версии 1.0.0-beta.24

С помощью angular-cli и команды ng init я обновил мои файлы конфигурации. Я думаю, что критические изменения были в angular-cli.json и package.json. Смотрите изменения файла конфигурации внизу.

Внесите изменения в функции экспорта, прежде чем ссылаться на них, как показано в деталях решения

Основные изменения конфигурации

Мой package.json выглядит следующим образом после слияния вручную, которое учитывает версии, используемые ng-init. Обратите внимание, что моя угловая версия — не 2.4.1, но после того, как я изменился, было наследование компонентов, которое было введено в 2.3, так что я был в порядке с этими версиями. Оригинальный package.json находится в вопросе.

Решение, которое сработало для меня:

  • Удалить node_modules и папку dist
  • (в cmd) >> ng update —all —force
  • (в cmd) >> npm install typescript @ «> = 3.4.0 и > Установка npm —save core-js
  • Комментирование импорта ‘core-js / es7 / refle’; в polyfill.ts
  • (в cmd) >> нг подача

Чтобы обновить Angular CLI до новой версии, вы должны обновить как глобальный пакет, так и локальный пакет вашего проекта.

Глобальный пакет:

Локальный проектный пакет:

Просто используйте встроенную функцию Angular CLI

обновить до последней версии.

Я попробовал это и получил пару ошибок из-за того, что мои библиотеки zone.js и ngrx / store были более ранними версиями.

Топ-пост этого месяца:  Добавление удаление записей в избранное

Обновив их до последних версий npm install [email protected] —save и npm install @ngrx/[email protected] -save , затем запуск угловой установки снова сработал для меня.

Вышло обновление платформы Angular до версии 7.0

Команда Angular представила новую версию платформы. В Angular 7.0 появились подсказки в интерфейсе командной строки и модуль для автоматической загрузки и удаления элементов во время скроллинга. Кроме того, немного изменился интерфейс в соответствии с концепцией Material Design.

Что нового в Angular 7.0

  • CLI Prompts. В интерфейсе командной строки теперь будут высвечиваться подсказки к командам, например, ng new или ng add @angular/material , чтобы помочь пользователю разобраться во встроенных возможностях платформы. Schematics поддерживает эту функцию, так что подсказки будут доступны во всех пакетах по ключу x-prompt .
  • Производительность. Платформа автоматически удаляет reflect-metadata из файла polyfills.ts перед тем, как сборка попадает на продакшн. Кроме того, разработчики реализовали в CLI возможности Bundle Budgets для контроля размера бандла.
  • Material Design. Разработчики внесли небольшие изменения в дизайн платформы, руководствуясь принципами Material Design.
  • Модуль ScrollingModule. Позволяет загружать и удалять из DOM-структуры элементы, основываясь на их видимом списке.
  • Модуль DragDropModule. Создаёт автоматическую отрисовку нового порядка элементов при их перемещении.
  • Пользовательские элементы. Angular Elements поддерживает веб-стандарты для предупреждения о проектировочном контенте в пользовательских элементах:
  • Зависимости. Добавлена поддержка TypeScript 3.1, RxJS 6.3 и Node 10 (поддержка Node 8 сохранена).

Партнёрские проекты

Команда Angular дала ссылки на запущенные смежные проекты от сторонних разработчиков:

  • Angular Console для запуска на локальной машине проектов Angular;
  • AngularFire в качестве npm-модуля @angular/fire ;
  • NativeScript для сборки одновременно устанавливаемой и веб-версии проекта;
  • StackBlitz 2.0 с поддержкой Angular Language Service.

Версия Angular 6.0 вышла в мае 2020 года. В ней появились новые CLI-команды, Angular Elements и древовидное представление данных с иерархической структурой.

Как правильно обновить Angular Project с V2 — > V7?

Мне поручено обновить средний проект Angular V2.0.1 до Angular V7.1.4 (последняя стабильная версия). В прошлом я много работал с Angular и обновился с V2 — > V4 и V4 — > V5 для другого проекта Angular в прошлом. Эти обновления не всегда были тривиальными и имели серьезные изменения. Проведя некоторые исследования, я наткнулся на Руководство по обновлению под углом (https://update.angular.io/), которое кажется хорошим началом. Я также наткнулся на ( Обновление Angular 2 до Angular 6 ) и в комментариях кто-то говорит, что я должен начать новый проект с использованием Angular CLI и переместить код вручную.

Еще одна вещь, которую стоит отметить, это то, что проект 2.0.1 использует systemjs (потому что он был создан из оригинального Angular Quickstart). В идеале мы должны переключиться на веб-пакет.

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

Как обновить проект Angular CLI?

angular-cli (6)

Переустановите (с пряжей)

Переустановите (с npm)

Другой способ — не использовать глобальную установку и добавить папку /node_modules/.bin в PATH или использовать сценарии npm. Обновление будет мягче.

Я пытаюсь обновить свой angular 2 проект с 2.0.0 до 2.4.1 . Я понимаю, что семантическое управление версиями было принято после выпуска 2.0.0 и выпуски 2.xx должны быть заменой. Мой опыт, кажется, указывает на обратное. Может быть, я просто не знаю, что я делаю, но я не нашел это простым .

Попытка 1 — обновление версии вручную

Моим наивным первым подходом было вручную обновить мои @angular зависимости. Вы можете сослаться на мой package.json ниже (обновление 1). Я внес эти изменения, затем npm install и получил несколько предупреждений, а затем получил следующую ошибку при попытке сделать ng serve .

Не удается прочитать свойство ‘AssetUrl’ из неопределенного

И мои предупреждения .

Поэтому я попытался исправить эти предупреждения, но я не знаю, как исправить все из них (например, @ ngtools / webpack), и некоторые из них, похоже, конфликтуют друг с другом. Поэтому я отказался от ручного подхода к обновлению моей угловой версии 2 .

Оригинальная упаковка.json

Обновление 1 файла package.json

Попытка 2 — использовать npm-check-updates

Поскольку, когда я пытался выбрать свои угловые зависимости для обновлений, я попал в паутину других зависимостей, которые нужно было обновить, я затем попытался просто обновить все.

Основываясь на этом ответе, я попробовал следующее:

Это прошло нормально, но когда я попробовал ng serve, я получил следующую ошибку:

ОШИБКА в AppModule не является NgModule

Используя информацию, собранную here , я понизил версию своей машинописи, эта ошибка исчезла, но появилась новая ошибка.

ОШИБКА в ошибке обнаружена при статическом разрешении значений символов. Ссылка на неэкспортированную функцию (позиция 29:10 в исходном файле .ts), разрешение символа restPaths в rest-paths.ts, разрешение символа AppModule в app.module.ts, разрешение символа AppModule в app.module.ts

Я боролся с этими ошибками, но тот факт, что у меня так много проблем, поднимает красные флаги.

Кто-нибудь может помочь? Я принимаю неправильный подход?

Обратите внимание, что я видел некоторые предложения по обновлению проектов angular-cli, которые рекомендуют удалить angular-cli и переустановить его, затем выполнить инициализацию ng и перезаписать ваши файлы конфигурации. Это не сработало для меня, потому что у меня уже была последняя версия.

Редактировать: утверждение о наличии последнего angular-cli было неверным. У меня была angular-cli version 1.0.0-beta.16 тогда как последняя на момент этого редактирования 1.0.0-beta.24 . Тем не менее я попытался обновить свой angular-cli и запустить ng init для моего существующего проекта. Теперь я замечаю, что не выполнил точно шаги, описанные на странице angular-cli github. Я пропустил npm install —save-dev [email protected] и уничтожил все свои node_modules вместо использования набросанной ими команды rm.

От ответа JJB я оказался на правильном пути, но модернизация прошла не очень гладко. Мой процесс подробно описан ниже. Надеемся, что в будущем процесс станет проще, и ответ JJB можно будет использовать или что-то еще более простое.

Детали решения

Я выполнил шаги, описанные в ответе JJB, чтобы точно обновить angular-cli. Однако после запуска npm install angular-cli была сломана. Даже попытка сделать ng version приведет к ошибке. Поэтому я не мог выполнить команду ng init . Смотрите ошибку ниже:

Чтобы иметь возможность использовать любые команды angular-cli, мне пришлось вручную обновить файл package.json и увеличить зависимости @angular до 2.4.1, а затем выполнить еще одну npm install .

После этого я смог сделать ng init . Я обновил мои файлы конфигурации, но ни один из файлов app / *. Когда это было сделано, я все еще получал ошибки. Первый подробно описан ниже, второй был того же типа ошибки, но в другом файле.

ОШИБКА в ошибке обнаружена при статическом разрешении значений символов. Вызовы функций не поддерживаются. Попробуйте заменить функцию или лямбду ссылкой на экспортированную функцию (позиция 62: 9 в исходном файле .ts), разрешив символ AppModule в C: / _ git / my-project / code / src / main / frontend / src / app /app.module.ts

Эта ошибка связана со следующим заводским провайдером в моем AppModule

Чтобы устранить эту ошибку, я использовал экспортированную функцию и внес следующие изменения в поставщика.

Резюме

Чтобы суммировать, что я понимаю, как наиболее важные детали, потребовались следующие изменения:

Обновите версию angular-cli, используя шаги, подробно изложенные в ответе JJB (и на их странице github).

Обновление @angular версии вручную, 2.0.0, похоже, не поддерживается angular-cli версии 1.0.0-beta.24

С помощью angular-cli и команды ng init я обновил мои файлы конфигурации. Я думаю, что критические изменения были в angular-cli.json и package.json. Смотрите изменения файла конфигурации внизу.

Внесите изменения в функции экспорта, прежде чем ссылаться на них, как показано в деталях решения

Основные изменения конфигурации

Мой package.json выглядит следующим образом после слияния вручную, которое учитывает версии, используемые ng-init. Обратите внимание, что моя угловая версия — не 2.4.1, но после того, как я изменился, было наследование компонентов, которое было введено в 2.3, так что я был в порядке с этими версиями. Оригинальный package.json находится в вопросе.

Решение, которое сработало для меня:

  • Удалить node_modules и папку dist
  • (в cmd) >> ng update —all —force
  • (в cmd) >> npm install typescript @ «> = 3.4.0 и > Установка npm —save core-js
  • Комментирование импорта ‘core-js / es7 / refle’; в polyfill.ts
  • (в cmd) >> нг подача

Чтобы обновить Angular CLI до новой версии, вы должны обновить как глобальный пакет, так и локальный пакет вашего проекта.

Глобальный пакет:

Локальный проектный пакет:

Просто используйте встроенную функцию Angular CLI

обновить до последней версии.

Я попробовал это и получил пару ошибок из-за того, что мои библиотеки zone.js и ngrx / store были более ранними версиями.

Обновив их до последних версий npm install [email protected] —save и npm install @ngrx/[email protected] -save , затем запуск угловой установки снова сработал для меня.

Добавить комментарий