如何从Angular 4更新/升级到Angular 5+

angular updates angular5

45486 观看

7回复

我需要将我的项目从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配置

作者: Sangwin Gawande 的来源 发布者: 2019 年 7 月 10 日

回应 (7)


48

此解决方案适用于使用角度模板的Visual Studio 2017

使用Node.js命令提示符或Open PowerShell。导航到项目目录并使用命令dir检查package.json文件是否存在。

关闭Visual Studio实例并运行该命令, npm install -g npm-check-updates 然后应显示以下输出

产量

然后使用命令ncu -u 以下包应更新到最新版本

pakage更新

如果包仍然指向Angular 4,则删除package-lock.json并再次按照上面给出的步骤操作。

Webpack被Visual Studio用作模块捆绑器。Webpack使用AotPlugin编译Angular 4应用程序,现在Webpack不再使用Aotplugin用于Angular 5.它现在使用AngularCompilerPlugin.So打开webpack.config.js并用AngularCompilerPlugin 替换所有出现的AotPlugin。

打开ClientApp / boot.server.ts文件并替换以下代码行(第22行)。

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

用,

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

来源链接

作者: San Jaisy 发布者: 21.01.2018 03:10

17

决定

Node版本更新修复了问题。

我不得不更新Node版本,

sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

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"
}
作者: Sangwin Gawande 发布者: 13.11.2017 09:29

7

检查Angular博客

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

在文章中,提到了更新指南。

你可以在这里找到它:https//angular-update-guide.firebaseapp.com/

此外,您可以更新angular-CLI1.5.0这将创造角V5项目。您可以与您的差异进行比较。

作者: Bunyamin Coskuner 发布者: 02.11.2017 08:01

7

如果您只想将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/

作者: Jerin Kurian 发布者: 07.03.2018 10:03

7

这是正确答案,而且非常简单。

按照Angular官方升级指南进行操作。

您将填写一份简短表格,选择您所使用的Angular版本以及要升级到的版本。然后,它会显示执行升级所需的步骤列表。您应该按照本指南进行所有升级。(请先导航离开之前):) :)

https://update.angular.io/

在此输入图像描述

作者: Francisco d'Anconia 发布者: 23.05.2018 09:58

0

将Angular 4升级为Angular 5

打开webpack.config.js

ContextReplacementPlugin中添加以下代码

 /angular(\\|\/)core(\\|\/)(@angular|esm5)/
作者: user1349544 发布者: 18.01.2018 07:05

0

详细说明,这有助于我将全球作为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 @angular-cli@1
$ 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/cli@1
$ npm install

然后

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^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/platform-server@^5.0.0 @angular/router@^5.0.0 typescript@2.4.2 rxjs@^5.5.2

这可能是需要的(并且不会受到伤害):$ npm审计修复

$ npm install typescript@2.4.2 --save-exact

资源:

https://update.angular.io/将向您展示最佳路线。

主要区别在于你仍然使用'http'模块。您可以(或需要)从http迁移到httpclient模块。在大多数情况下,这很容易。

作者: tjm1706 发布者: 29.08.2018 04:36
32x32