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

时间:2016-04-13 12:03:40

标签: npm angular

最近我在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更新angular2@2.0.0beta.14 ,它也不会做任何事情。

11 个答案:

答案 0 :(得分:206)

命令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,其中显示所有过时的软件包以及所需的最新版本。< / p>

  • 我们需要链接两个命令npm update -Dnpm update -S的原因是为了克服this bug,直到它被修复为止。

答案 1 :(得分:54)

我用于迁移从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

答案 2 :(得分:31)

升级到最新的Angular 5

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

由角度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

以角度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": {}
  }
}

答案 3 :(得分:11)

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

  

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

另请查看本指南Updating your Angular projects

仅限bash个用户

如果你在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

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/compileryarn list @angular/compiler
  • 要检查npm run上可用的最新稳定@angular版本:
    npm show @angular/compiler version

答案 4 :(得分:7)

官方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 clean从npm 5开始重命名为npm cache verify

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

这将解决问题。

答案 5 :(得分:4)

使用npm-upgrade的替代方法:

  1. npm i -g npm-upgrade
  2. 转到项目文件夹

    1. npm-upgrade check
    2. 它会询问您是否要升级包装,选择是

      这很简单

答案 6 :(得分:3)

如果您要将所有软件包安装/升级到最新版本,并且您正在运行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)和devDependencies( - D)中的cli包

答案 7 :(得分:2)

刚开始:

https://update.angular.io

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

我建议选择&#39; Advanced&#39;看到所有步骤。复杂性是一个相对的概念 - 我不知道这个特征是谁的愚蠢想法,但如果你选择&#39; Basic&#39;它不会向你展示所需的所有步骤,你可能会错过一些重要的东西,否则你的基本&#39;应用程序正在使用

enter image description here

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

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

答案 8 :(得分:1)

  

npm uninstall --save-dev angular-cli

     

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

     

ng update @ angular / cli

     

ng update @ angular / core --force

     

ng update @ angular / material或npm i @ angular / cdk @ 6   @ angular / material @ 6 --save

     

npm install typescript @&#39;&gt; = 2.7.0&lt; 2.8.0&#39;

答案 9 :(得分:0)

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

这将检查所有满足并检查最佳拟合度。

我有很多问题需要更新和保持我的应用程序功能单元我让verbose lense做了检查然后我运行

  

npm i

安装新建议的依赖项。

答案 10 :(得分:0)

如果您希望像我一样将项目更新为最新版本,那么自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