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

Мне нужно обновить свой проект от Angular 4 до Angular 5+,

Мне нужно изменить все следующие зависимости на Angular 5+.

Я также обновил Angular CLI до 1.5.0.

Я попытался создать новый проект, но, похоже, создал только проект Angular 4.

новый NG5_Project

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

Что я делаю не так.

Конфигурация CLI:

Конфигурация CLI

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

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

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

вывод

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

обновление pakage

Если пакеты все еще указывают на Угловое 4, удалите package-lock.json и package-lock.json описанные выше шаги.

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);

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

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

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

 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" } 

Отметьте Угловой блог

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

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

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

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

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

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

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

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

Вот правильный ответ, и это очень просто.

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

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

https://update.angular.io/

введите описание изображения здесь

Чтобы обновить угловое 4 до углового 5

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

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

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

Разработав немного больше, это помогло мне с BOTH глобальным как PROJECT LOCAL upgrade .

Точные направляющие линии (конечно) указаны в 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-exact

Источник:

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

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

Давайте будем гением компьютера.