如何正确升级角度2 (npm)到最新版本?

Recently I started Angular 2 tutorial at https://angular.io/docs/ts/latest/tutorial/.

最近我在https://angular.io/docs/ts/latest/tutorial/上开始了角2教程。

and left off with Angular 2 beta 8. Now I resumed the tutorial and latest beta is beta 14.

最后是角2 8。现在我继续教程，最新的beta 14。

If I simply do npm update a few modules (preloaded with the tutorial) are updated but not Angular2 (I can see that with npm ls).

如果我简单地进行npm更新，就会更新一些模块(预装教程)，但不会更新Angular2(我可以在npm ls中看到这一点)。

If I do npm update angular 2 or npm update angular2@2.0.0beta.14 it just does nothing either.

如果我做npm更新角2或npm更新angular2@2.0.0beta。它什么也不做。

9 个解决方案

#1

The command npm update -D && npm update -S will update all packages inside package.json to their latest version, according to their defined version range. You can read more about it here.

命令npm update -D & npm update -S将更新包内的所有包。根据他们定义的版本范围，json到他们的最新版本。你可以在这里读到更多。

If you want to update Angular from a version prior to 2.0.0-rc.1, then you'll need to manually edit package.json, as Angular was split into several npm modules. Without this, as angular2 package points to 2.0.0-beta.21, you'll never get to use the latest version of Angular.
A list with some of the most common modules that you'll need to get started can be found in the quickstart repository.

如果你想在2.0 -rc之前从一个版本更新角度。1，然后您需要手动编辑包。json，因为角被分割成几个npm模块。没有这个，angular2包指向2.0 -beta。你永远也不能使用最新的角度。可以在quickstart存储库中找到一个列表，其中包含您需要启动的一些最常见的模块。

Notes:

注:

• 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过期，它显示了所有过期的软件包以及他们想要的和最新的版本。

• The reason why we need to chain two commands, npm update -D and npm update -S is to overcome this bug until it's fixed.

  我们需要将两个命令(npm update -D和npm update -S)链起来的原因是要克服这个bug，直到它被修复。

#2

Another nice package which I used for migrating form a beta version of Angular2 to Angular2 2.0.0 final is npm-check-updates

另一个很好的软件包是npm-check-updates，用于从beta版本的Angular2迁移到Angular2 2.0.0 final

It shows the latest available version of all packages specified within your package.json. In contrast to npm outdated it is also capable to edit your package.json, enabling you to do a npm upgrade later.

它显示了在packag .json中指定的所有包的最新可用版本。与npm过时相反，它还可以编辑您的包。json，允许您稍后进行npm升级。

Install

安装

sudo npm install -g npm-check-updates

sudo npm安装-g npm检查更新

Usage

使用

ncufor display

ncufor显示

ncu -u for re-writing your package.json

ncu -u用于重新编写包。json

#3

Upgrade to latest Angular 5

升级到最新的角5

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

角Dep包:npm安装@角/{动画，通用，编译器，核心，表单，http，平台浏览器，平台浏览器-动态，路由器}@latest -save

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

角cli npm安装所安装的其他包——保存core-js@latest rxjs@latest zone.js@latest

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

角Dev包:npm安装——save-dev @角/{编译器-cli,cli，语言服务}@latest

Types Dev packages: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

类型Dev包:npm安装——save-dev @types/{jasmine,jasminewd2,node}@latest

Other packages that are installed as dev dev by the angular cli: 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

通过角cli: npm安装作为dev安装的其他软件包——save-dev codelyzer@latest jasmine-core@latest jasmin - specte -reporter@latest karma@latest karma@latest karma-chromelauncher@latest karma-karma-_cli@latest karma-covercle -伊斯坦布尔汇报最近的karma-reportter@最新的karma-0:最新的karma-jasmine@最新的karma.最新的

Install the latest supported version used by the Angular cli (don't do @latest): npm install --save-dev typescript@2.4.2

安装角cli(不做@latest)使用的最新支持版本:npm安装——save-dev typescript@2.4.2

Rename file angular-cli.json to .angular-cli.json and update the content:

angular-cli重命名文件。.angular-cli json。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": {}
  }
}

#4

For bash users only

If you are on are on Mac/Linux or running bash on Windows(that wont work in default Windows CMD) you can run that oneliner:

如果你在Mac/Linux或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

npm安装@angular / {动画,常见的,编译器,核心,形式,http,platform-browser,platform-browser-dynamic,路由器,compiler-cli } @4.4.5,保存

yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5

纱添加@angular / {动画,常见的,编译器,核心,形式,http,platform-browser,platform-browser-dynamic,路由器,compiler-cli } @4.4.5

Just specify version you wan't e.g @4.4.5 or put @latest to get the latest

只指定你不需要的版本。g @4.4.5或put @latest获取最新信息

Check your package.json just to make sure you are updating all @angular/* packages that you app is relying on

检查你的包。json只是为了确保您正在更新您的应用程序所依赖的所有@ angle /*包

• To see exact @angular version in your project run:
  npm ls @angular/compiler or yarn list @angular/compiler
• 要在项目运行中查看准确的@ angle版本:npm ls @ angle /compiler或纱线列表@ angle /compiler
• To check the latest stable @angular version available on npm run:
  npm show @angular/compiler version
• 要查看npm运行的最新稳定的@角版本:npm显示@角度/编译器版本。

#5

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

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

1.First of all, you need to uninstall the current angular from your system.

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

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

2.Clean up the cache

2。清理缓存

npm cache clean

EDIT

编辑

As pointed out by @candidj

@candidj指出

npm cache clean is renamed as npm cache verify from npm 5 onwards

npm缓存清理将从npm 5开始重命名为npm缓存验证

3.Install angular globally

3所示。全球安装角

npm install -g @angular/cli@latest

4.Local project setup if you have one

4所示。如果您有本地项目设置的话

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

Please check the same down on the link below:

请查看下面的链接:

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

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

This will solve the problem.

这将解决问题。

#6

If you want to install/upgrade all packages to the latest version and you are running windows you can use this in powershell.exe:

如果你想安装/升级所有的包到最新的版本并且你正在运行windows，你可以在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:

如果您也使用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'})";
}

This will save the packages exact (-E), and the cli packages in devDependencies (-D)

这将保存包的精确值(-E)和devDependencies中的cli包(-D)

#7

Alternative approach using npm-upgrade:

使用npm-upgrade替代方法:

1. npm i -g npm-upgrade
2. npm我- g npm-upgrade

Go to your project folder

进入你的项目文件夹

2. npm-upgrade check
3. npm-upgrade检查

It will ask you if you wish to upgrade the package, select Yes

它将询问您是否希望升级包，选择Yes

That's simple

这是简单的

#8

Best way to do is use the extension(pflannery.vscode-versionlens) in vscode.

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

this checks for all satisfy and checks for best fit.

这是检查所有满足和检查最佳适合。

i had lot of issues with updating and keeping my app functioining unitll i let verbose lense did the check and then i run

我在更新和保持我的应用程序功能上有很多问题

npm i

npm我

to install newly suggested dependencies.

安装新建议的依赖项。

#9

Just start here:

https://update.angular.io

https://update.angular.io

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

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

I recommend choosing 'Advanced' to see all steps. Complexity is a relative concept - and I don't know whose stupid idea this feature was, but if you select 'Basic' it won't show you all steps needed and you may miss something important that your otherwise 'Basic' application is using.

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

As of version 6 there is a new Angular CLI command ng update which intelligently goes through your dependencies and performs checks to make sure you're updating the right things :-)

从版本6开始，将有一个新的CLI命令ng更新，它将智能地检查您的依赖项并执行检查，以确保您更新了正确的内容:

The steps will outline how to use it :-)

步骤将概述如何使用它: