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

Posted

技术标签:

【中文标题】如何从 Angular 4 更新/升级到 Angular 5+【英文标题】:How to update / upgrade from Angular 4 to Angular 5+ 【发布时间】:2018-04-14 16:16:16 【问题描述】:

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

【问题讨论】:

【参考方案1】:

问题已通过 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"

【讨论】:

【参考方案2】:

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

遵循官方 Angular 升级指南。

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

https://update.angular.io/

【讨论】:

【参考方案3】:

详细说明,这有助于我将全局作为 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 audit fix

$ npm install typescript@2.4.2 --save-exact

来源:

https://update.angular.io/ 会告诉你最好的路线。

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

【讨论】:

【参考方案4】:

如果您只想将 angular4 项目升级到 angular 5,请执行以下操作。

    转到您的项目目录。 打开命令提示符并运行以下命令 npm install -g npm-check-updates ncu -u

这对我有用。

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

【讨论】:

"simply to angular 5" ,嗯,对我来说,这导致了对 Angular 7 的更新。【参考方案5】:

将您的 Angular 4 升级到 Angular 5

打开你的 webpack.config.js

ContextReplacementPlugin

中添加以下代码
 /angular(\\|\/)core(\\|\/)(@angular|esm5)/

【讨论】:

【参考方案6】:

查看 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 项目。你可以和你的比较一下。

【讨论】:

我将 Angular cli 更新为 1.5.0,但它在 package.json 中创建了上面的配置 我自己没有尝试过,但在文章中他们说它默认创建 v5。 blog.angular.io/… 我已经尝试过 angular-cli v1.5,它使用 v5 创建了项目。确保您已安装最新版本的 angular-cli。先运行npm uninstall -g @angular/cli再安装。 我看到了你的配置。这确实很奇怪,但是正如我之前所说的那样,它对我来说非常好。 angular-cli 可能存在错误(我对此表示怀疑)。我建议您在另一台计算机上尝试,最好不要安装任何 npm 或 angular-cli。 是的,我做到了,在具有相同配置的不同机器上它工作正常。我尝试卸载所有内容并将其重新安装

以上是关于如何从 Angular 4 更新/升级到 Angular 5+的主要内容,如果未能解决你的问题,请参考以下文章

将 Angular 应用程序从 6 升级到 10 更新后会产生很多错误

我们为什么以及是如何从 Angular.js 迁移到 Vue.js?

Angular 4 - 为 Facebook 动态更新 Meta 标签(打开图表)

从 Angular 4 升级到 7 导致问题

从 Angular 9 升级到 Angular 10 时遇到问题

Angular 6 ng lint combineLatest 已弃用