如何正确将Angle 2（npm）升级到最新版本？

最近，我从https://angular.io/docs/ts/latest/tutorial/开始了Angular 2教程。

并停止使用Angular 2 beta8。现在，我恢复了该教程，最新的beta是beta 14。

如果我只是简单地执行npm update，则会更新一些模块（随本教程预装），但不会更新Angular2（我可以通过npm ls看到）。

如果我执行npm update angular 2或npm update angular2@2.0.0beta.14，它也不执行任何操作。

该命令npm update -D && npm update -S将根据其定义的版本范围将所有软件包更新package.json为最新版本。您可以在此处了解更多信息。

如果您想从之前的版本更新Angular 2.0.0-rc.1，则需要手动进行编辑package.json，因为Angular被分为多个npm模块。没有这个，正如angular2包所指向的那样2.0.0-beta.21，您将永远无法使用最新版本的Angular。
可以在quickstart存储库中找到包含一些最常用的模块入门的列表。

笔记：

• 保持软件包最新版本的一种很酷的方法是使用npm outdated它，它会向您显示所有过时的软件包以及所需的软件包和最新版本。

• 为什么我们需要链两个命令，原因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

用法

ncu用于显示

ncu -u 用于重写package.json

升级到最新的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 Dev软件包： 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": {}
  }
}

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

随着ng update有时你可能需要添加--force标志。如果这样做，请确保当前角度版本支持以这种方式安装的打字稿版本，否则，您可能需要降级打字稿版本。

另请查阅本指南更新您的Angular项目

仅适用于bash用户

如果您正在Mac/Linux使用bash或正在运行bash Windows（默认情况下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
• 要检查@angularnpm上可用的最新稳定版本，请运行：
  npm show @angular/compiler version

npm官方页面建议了一种针对全局和本地场景更新角度版本的结构化方法。

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

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

2.清理缓存

npm cache clean

编辑

正如@candidj所指出的

npm cache cleannpm cache verify从npm 5开始重命名

3，全局安装角度

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-upgrade的替代方法：

1. npm i -g npm-upgrade

转到您的项目文件夹

2. npm-upgrade check

它将询问您是否要升级软件包，请选择“是”。

很简单

如果您想将所有软件包安装/升级到最新版本，并且正在运行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）

从这里开始：

https://update.angular.io

选择您正在使用的版本，它将为您提供逐步指南。

我建议选择“高级”以查看所有步骤。复杂性是一个相对的概念-我不知道此功能是谁的愚蠢想法，但是如果您选择“基本”，它将无法显示所有需要的步骤，并且您可能会错过一些重要的东西，否则您的“基本”应用程序就会使用。

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

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

npm卸载--save-dev angular-cli

npm install --save-dev @ angular / cli @ latest

ng update @ angular / cli

ng update @ angular / core --force

ng更新@ angular / material或npm i @ angular / cdk @ 6 @ angular / material @ 6-保存

npm install typescript @'> = 2.7.0 <2.8.0'

最好的方法是在vscode中使用扩展名（pflannery.vscode-versionlens）。

这会检查所有满意度并检查是否最合适。

我在更新和保持我的应用程序功能方面遇到很多问题，我让冗长的镜头进行了检查，然后运行

我

安装新建议的依赖项。

如果您像我一样只是将项目更新为最新版本，那么从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