Как обновить/обновить с Angular 4 до Angular 5+

Ответ 1

Проблема исправлена с обновлением версии узла.

Мне пришлось обновить версию Node,

sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/[email protected]

ng new ProjectName

node --version ==> 8.9.0

ng --version ==> 1.5.0

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
}

Ответ 2

Это решение для Visual Studio 2017 с использованием углового шаблона

Используйте командную строку Node.js или откройте PowerShell. Перейдите в каталог проекта и используйте команду dir, чтобы проверить, существует ли файл package.json.

Закройте экземпляр Visual Studio и выполните команду npm install -g npm-check-updates после чего должен появиться следующий вывод

Затем используйте команду ncu -u. Следующий пакет должен обновиться до последней версии.

Если пакеты по-прежнему указывают на Angular 4, удалите package-lock.json и package-lock.json выполните приведенные выше шаги -g iven.

Webpack используется Visual Studio в качестве связующего модуля. Webpack использует AotPlugin для компиляции приложений Angular 4, теперь Webpack больше не использует Aotplugin для Angular 5. Теперь он использует AngularCompilerPlugin. Для этого откройте webpack.config.js и замените все вхождения AotPlugin на AngularCompilerPlugin.

Откройте файл ClientApp/boot.server.ts и замените следующую строку кода (строка № 22).

const zone = moduleRef.injector.get(NgZone);

с,

const zone: NgZone = moduleRef.injector.get(NgZone);

Ссылка на источник

Ответ 3

Проверьте Angular блог из

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

В статье упоминается руководство по обновлению.

Вы можете найти его здесь: https://angular-update-guide.firebaseapp.com/

Также вы можете обновить свой angular-CLI до 1.5.0 что создаст проект angular v5. Вы можете сравнить различия с вашими.

Ответ 4

Если вы хотите просто обновить свой проект angular4 до angular 5, сделайте следующее.

1. Перейдите в каталог вашего проекта.
2. Откройте командную строку и выполните следующие команды
3. npm install -g npm-check -u pdates
4. нку -u

Это сработало для меня.

http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

Ответ 5

Здесь правильный ответ, и это супер просто.

Следуйте официальному руководству по обновлению Angular.

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

https://update.angular.io/

Ответ 6

Чтобы обновить Angular 4 до Angular 5

Откройте webpack.config.js

Добавьте код ниже внутри ContextReplacementPlugin

 /angular(\\|\/)core(\\|\/)(@angular|esm5)/

Ответ 7

Проработав немного больше, это помогло мне с ОБА глобальным обновлением PROJECT LOCAL.

Точные ориентиры приведены (конечно) в https://update.angular.io/.

Глобальный:

$ npm uninstall -g angular-cli (to be sure)
$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @[email protected]
$ ng -v ... this will show you the current CLI version. 

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

$ cd to/your/project/folder
$ remove the folder node_modules
$ npm install --save-dev @angular/[email protected]
$ npm install

Тогда:

npm install @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 [email protected] [email protected]^5.5.2

Это может быть необходимо (и не повредит): исправление аудита $ npm

$ npm install [email protected] --save-точный

Источник:

https://update.angular.io/ покажет вам лучший маршрут.

Основное различие заключается в том, что вы все еще используете модуль http. Вы можете (или должны) перейти с http на модуль httpclient. В большинстве случаев это довольно просто.