How do I correctly upgrade angular 2 (npm) to the latest version?

小开

最佳答案

命令 npm update -D && npm update -S将把 package.json中的所有包更新到它们的最新版本 根据 < a href = “ https://docs.npmjs.com/files/package.json # endences”rel = “ noReferrer”> 他们定义的版本范围 。你可以阅读更多关于它的给你。

如果你想从 2.0.0-rc.1之前的版本更新角度，那么你需要手动编辑 package.json，因为角度被分成几个 npm 模块。如果没有这个，作为棱角2包指向 2.0.0-beta.21，你将永远不会得到使用的角度最新版本。
在快速启动存储库快速启动存储库中可以找到一个包含一些最常见的模块的列表，您需要开始使用这些模块。

备注:

A cool way to stay up to date with your packages' latest version is to use npm outdated which shows you all outdated packages together with their wanted and latest version.
之所以我们需要链接两个命令，npm update -D和 npm update -S是为了克服这个窃听器，直到它的固定。

小开

我用来从 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

用法

ncufor display

ncu -u for re-writing your package.json

小开

更新:
从 CLI v6开始，您可以只运行 ng update，以便将您的依赖项自动更新到新版本。

对于 ng update，有时可能需要添加 --force标志。如果你这样做，确保你得到的打印脚本的版本以这种方式安装是由你当前的角度版本支持, 否则，您可能需要降低打印脚本版本的级别。

同时检查这个指南更新您的 Angular 项目

只适用于 Bash用户

如果你在 Mac/Linux上运行或者在 Windows上运行 bash (在默认的 Windows CMD中不会工作) ，你可以运行那个一线程:

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或者 put@last 来获取最新的版本

检查你的 package.json 确保更新了应用程序所依赖的所有 @angular/*软件包

要查看项目运行中的确切 @angular版本:
npm ls @angular/compiler或 yarn list @angular/compiler
要检查 npm 运行时可用的最新稳定 @angular版本:
npm show @angular/compiler version

小开

如果你想安装/升级所有软件包到最新版本并且你正在运行窗口，你可以在 powershell.exe中使用:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
npm install @angular/$package@latest -E
}

If you also use the cli, you can do this:

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)的包和 devDependencies(- D)中的 cli 包

小开

Official npm page suggest a structured method to update angular version for both global and local scenarios.

1. 首先，你需要卸载当前角度从你的系统。

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli

2. 清理缓存

npm cache clean

剪辑

正如@Candidj 所指出的

从 npm 5开始，npm cache clean改名为 npm cache verify

3. 全局安装角度

npm install -g @angular/cli@latest

4.Local project setup if you have one

rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install

请在以下连结查阅:

Https://www.npmjs.com/package/@angular/cli#updating-angular-cli

这会解决问题的。

小开

使用 Npm-升级的替代方法:

npm i -g npm-upgrade

转到您的项目文件夹

npm-upgrade check

它会询问您是否希望升级软件包，选择 Yes

很简单

小开

升级到最新的角度5

Angular Dep packages: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Other packages that are installed by the angular cli npm install --save core-js@latest rxjs@latest zone.js@latest

Angular Dev packages: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

类型开发软件包: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

通过角度 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 使用的最新支持版本(不要做@best) : npm install --save-dev typescript@2.4.2

将文件重命名为 angle-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": {}
}
}

小开

最好的方法是在 vscode 中使用扩展名(pflannery.vscode-version)。

这个检查所有的满意和检查最适合。

我有很多问题与更新和保持我的应用程序功能，直到我让详细镜头做了检查，然后我运行

Npm i

安装新建议的依赖项。

小开

从这里开始:

Https://update.angular.io

Select the version you're using and it will give you a step by step guide.

我建议选择“高级”来查看所有步骤。复杂性是一个相对的概念——我不知道这个特性是谁的愚蠢想法，但是如果你选择“ Basic”，它不会显示所有需要的步骤，你可能会错过一些重要的东西，否则你的“ Basic”应用程序正在使用。

从版本6开始，出现了一个新的 Angular CLI 命令 ng update，它智能地遍历您的依赖关系，并执行检查以确保您正在更新正确的内容: -)

这些步骤将概述如何使用它: -)

小开

Npm uninstall —— save-dev angle-cli

Npm install —— save-dev@angle/cli@last

ng update @angular/cli

角度/核心力

更新@棱角/材料或 npm i@棱角/cdk@6 @ 棱角/材质@6-保存

npm install typescript@'>=2.7.0 <2.8.0'

小开

如果你看起来像我只是更新你的项目到最新的这些是什么工作形式，我从角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