如何正确将 angular 2 (npm) 升级到最新版本？
Posted
技术标签:
【中文标题】如何正确将 angular 2 (npm) 升级到最新版本？【英文标题】：How do I correctly upgrade angular 2 (npm) to the latest version? 【发布时间】：2016-08-04 12:18:06 【问题描述】：最近我在 https://angular.io/docs/ts/latest/tutorial/ 开始了 Angular 2 教程。
并离开了 Angular 2 beta 8。 现在我恢复了教程，最新的测试版是 beta 14。
如果我只是简单地进行 npm update 一些模块（预加载教程），但不是 Angular2（我可以通过 npm ls 看到）。
如果我这样做 npm update angular 2 或 npm update angular2@2.0.0beta.14 它也什么都不做。
【问题讨论】：
npm install angular2@2.0.0beta.14 --save 应该这样做，我认为。
是的，它奏效了。查看我对 Cosmin 回答的评论
对于来自 Google 的人，请注意更新 Angular 本身后可能会出现问题，如果您正在使用它，还需要更新 angular-cli。详情请见github.com/angular/angular-cli#updating-angular-cli。
angular-update-guide.firebaseapp.com
【参考方案1】：
如果您像我一样只是将您的项目更新到最新版本，那么这些就是自 Angular 6 以来对我有效的方法：
在您的项目文件夹中打开控制台：
If you type: ng update然后您将收到以下消息：
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
@angular/cli 7.0.7 -> 7.2.2 ng update @angular/cli
@angular/core 7.0.4 -> 7.2.1 ng update @angular/core
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
所以我通常直接去做：
ng update --all终于可以检查你的新版本了：
ng version
Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.12.2
@angular-devkit/build-angular 0.12.2
@angular-devkit/build-optimizer 0.12.2
@angular-devkit/build-webpack 0.12.2
@angular-devkit/core 7.2.2
@angular-devkit/schematics 7.2.2
@angular/cli 7.2.2
@ngtools/webpack 7.2.2
@schematics/angular 7.2.2
@schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4
【讨论】：
【参考方案2】：更新：
从CLI v6 开始，您只需运行ng update 即可将您的依赖项自动更新到新版本。
使用
ng update有时您可能想要添加--force标志。 如果这样做，请确保您获得的打字稿版本 您当前的角度版本支持以这种方式安装， 否则你可能需要降级 typescript 版本。
还可以查看本指南Updating your Angular projects
仅限bash 用户
如果您在 Mac/Linux 上运行 bash 或在 Windows 上运行 bash（默认情况下不会工作 Windows CMD），您可以运行该 oneliner：
npm install @angular/animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli@4.4.5 --save
yarn add @angular/animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli@4.4.5
要在您的项目中查看确切的只需指定您不想要的版本，例如 @4.4.5 或输入 @latest 以获取最新版本
检查您的
package.json只是为了 确保您正在更新您的应用所依赖的所有@angular/*软件包
@angular 版本，请运行：npm ls @angular/compiler 或 yarn list @angular/compiler
要检查 npm 上可用的最新稳定版@angular：npm show @angular/compiler version
【讨论】：
【参考方案3】：npm 卸载 --save-dev angular-cli
npm install --save-dev @angular/cli@latest
ng 更新@angular/cli
ng 更新@angular/core --force
ng 更新 @angular/material 或 npm i @angular/cdk@6 @angular/material@6 --save
npm install typescript@'>=2.7.0
【讨论】：
【参考方案4】：从这里开始：
https://update.angular.io
选择您正在使用的版本，它将为您提供分步指南。
我建议选择“高级”来查看所有步骤。复杂性是一个相对的概念——我不知道这个功能是谁的愚蠢想法，但如果你选择“基本”，它不会显示所有需要的步骤，你可能会错过一些重要的东西，否则你的“基本”应用程序正在使用.
从版本 6 开始，有一个新的 Angular CLI 命令ng update 智能地检查您的依赖项并执行检查以确保您更新了正确的内容:-)
这些步骤将概述如何使用它:-)
【讨论】：
不要将NgUpgrade 与ng update 混淆。 NgUpgrade 用于将 AngularJS 更新为 Angular
最近我在更新时遇到了很多问题，尤其是与角度材料相关的错误。我不得不删除node_modules 的内容并运行npm install 的最后3 次更新——甚至是6.0 -> 6.1。不知道为什么，但如果你在一次简单的更新中遇到很多奇怪的错误，那就试一试吧。【参考方案5】：
官方 npm 页面建议使用结构化方法来更新全局和本地场景的 Angular 版本。
1.首先，您需要从您的 系统。
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli
2.清理缓存
npm cache clean
编辑
正如@candidj 指出的那样
npm cache clean 从 npm 5 起重命名为 npm cache verify
3.全局安装angular
npm install -g @angular/cli@latest
4.本地项目设置（如果有的话）
rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install
请在下面的链接中查看相同的内容：
https://www.npmjs.com/package/@angular/cli#updating-angular-cli
这样就可以解决问题了。
【讨论】：
npm cache clean 现在更改为`npm cache verify`，截至npm 5【参考方案6】：
升级到最新的 Angular 5
Angular Dep 包：
npm install @angular/animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router@latest --save
由 Angular cli 安装的其他软件包
npm install --save core-js@latest rxjs@latest zone.js@latest
Angular 开发包：
npm install --save-dev @angular/compiler-cli,cli,language-service@latest
类型开发包：
npm install --save-dev @types/jasmine,jasminewd2,node@latest
通过 Angular cli 作为 dev dev 安装的其他软件包：
npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest
安装 Angular cli 使用的最新支持版本（不要使用@latest）：
npm install --save-dev typescript@2.4.2
将文件 angular-cli.json 重命名为 .angular-cli.json 并更新内容：
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project":
"name": "project3-example"
,
"apps": [
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments":
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
],
"e2e":
"protractor":
"config": "./protractor.conf.js"
,
"lint": [
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
,
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
,
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
],
"test":
"karma":
"config": "./karma.conf.js"
,
"defaults":
"styleExt": "css",
"component":
【讨论】：
优秀。请注意，rxjs@latest 更新为 6.0.0，这与最新的 Angular 版本 (5.2.1) 不兼容。我不得不手动还原，这很好。【参考方案7】：
最好的办法是在 vscode 中使用扩展名(pflannery.vscode-versionlens)。
这将检查所有满足并检查最佳匹配。
我在更新和保持我的应用程序运行时遇到了很多问题，我让verbose lense 进行了检查，然后我运行了
npm 我
安装新建议的依赖项。
【讨论】：
【参考方案8】：使用npm-upgrade的替代方法：
npm i -g npm-upgrade
转到您的项目文件夹
npm-upgrade check
它会询问你是否要升级包，选择是
很简单
【讨论】：
【参考方案9】：如果您想将所有软件包安装/升级到最新版本并且您正在运行 Windows，您可以在 powershell.exe 中使用它：
foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router"))
npm install @angular/$package@latest -E
如果你也使用cli，你可以这样做：
foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli'))
iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package))'-D')";
这将准确保存包 (-E)，并将 cli 包保存在 devDependencies (-D) 中
【讨论】：
它对我不起作用，总是说未满足的依赖：/ @DS_web_developer 没关系。这些只是警告，而不是错误 很遗憾没有，它说 FAILED，当然我的包 json 没有更新（未满足的依赖关系是针对每个角度包的） 什么是未满足的依赖关系？ 啊，好吧，我猜未满足的依赖是TypeScript，因为最新的ng5需要更高的ts版本:)【参考方案10】：
命令npm update -D && npm update -S 会将package.json 中的所有包更新到最新版本，根据their defined version range。你可以阅读更多关于它的信息here。
如果您想从 2.0.0-rc.1 之前的版本更新 Angular，那么您需要手动编辑 package.json，因为 Angular 被拆分为多个 npm 模块。没有这个，因为angular2 包指向2.0.0-beta.21，你将永远无法使用最新版本的 Angular。
可以在quickstart repository 中找到包含一些您需要开始使用的最常见模块的列表。
注意事项：
让您的软件包保持最新版本的一种很酷的方法是使用npm outdated，它会向您显示所有过时的软件包以及他们想要的最新版本。
我们需要链接两个命令npm update -D 和npm update -S 的原因是要克服this bug 直到它被修复。
【讨论】：
感谢科斯敏。我听从了乔·克莱的建议，它奏效了。但是，您是一个更通用的解决方案，这绝对是好的。我还建议使用 npm-install-missing （另一个 npm 包）以防任何过时的依赖项。 那个模块已经很老了，我认为这是因为 npm 在npm update 上遇到了一些问题，而这个问题在此期间得到了修复。查看npm update --save 是否有效的一个很酷的方法是查看npm outdated 是否没有显示任何内容。
npm install @angular not angular2 :-)
我的 npm 名称是 @angular。 angular2 在 beta17 之前是这样的
@Elisabeth 我终于明白了，我会更新我的答案。谢谢！【参考方案11】：
我用来从 Angular2 的 beta 版本迁移到 Angular2 2.0.0 final 的另一个不错的包是 npm-check-updates
它显示你的 package.json 中指定的所有包的最新可用版本。与npm outdated 相比，它还能够编辑您的package.json，使您能够稍后执行npm upgrade。
安装
sudo npm install -g npm-check-updates
用法
ncu用于显示
ncu -u 重写你的 package.json
【讨论】：
非常适合我，但 ***.com/a/46148361/2055782 会做什么？以上是关于如何正确将 angular 2 (npm) 升级到最新版本？的主要内容，如果未能解决你的问题，请参考以下文章
在 Angular (>= 2) 应用程序中，如何将 npm package.json 文件中的版本信息包含到已编译的输出文件中？