web-dev-qa-db-ja.com

どうやってAngular 2（npm）を最新バージョンに正しくアップグレードできますか？

最近私は https://angular.io/docs/ts/latest/tutorial/ でAngular 2チュートリアルを始めました。

そしてAngular 2 beta 8をやめました。今度はチュートリアルを再開し、最新のbetaはbeta 14です。

npm update を実行すると、いくつかのモジュール（チュートリアルでプリロードされています）は更新されますがAngular 2は更新されません（ npm ls で確認できます）。

npm update angle 2 または npm update [email protected] とすると、何もしません。

npmangular
122
dragonmnl

コマンドnpm update -D && npm update -Sは、package.json内のすべてのパッケージを最新のバージョンに更新します。定義されたバージョン範囲に従います。あなたはそれについてもっと読むことができます ここ 。

Angularを2.0.0-rc.1より前のバージョンから更新する場合は、Angularがいくつかのnpmモジュールに分割されているので、手動でpackage.jsonを編集する必要があります。これがないと、 angular2 packageは2.0.0-beta.21を指すので、Angularの最新バージョンを使用することはできません。
始めるのに必要な最も一般的なモジュールのリストは quickstartリポジトリ にあります。

注：

  • あなたのパッケージの最新バージョンを最新の状態に保つためのクールな方法 は npm outdated を使うことです。

  • 2つのコマンド、npm update -Dとnpm update -Sをチェーニングする必要があるのは、 このバグ それが修正されるまで/を克服するためです。

206
Cosmin Ababei

Angular 2のベータ版からAngular2 2.0.0 finalへの移行に使用したもう1つのNiceパッケージはnpm-check-updatesです。

Package.jsonで指定されているすべてのパッケージの最新の利用可能なバージョンが表示されます。 npm outdatedとは対照的に、package.jsonを編集することもでき、後でnpm upgradeを実行できます。

インストール

Sudo npm install -g npm-check-updates

使用法

表示用のncu

package.jsonを書き換えるためのncu -u

54
Seven

最新の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

タイプDevパッケージ：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

Angularcliで使用されている最新のサポートされているバージョンをインストールします（@latestはしません）：npm install --save-dev [email protected]

ファイル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": {}
  }
}
31
Isak La Fleur

更新：
[ - 。] CLI v6 からは、依存関係を自動的に新しいバージョンに更新するために ng update を実行することができます。

ng update を使うと--forceフラグを付けたくなることがあります。その場合は、この方法でインストールしたTypeScriptのバージョンが現在のAngularバージョンでサポートされていることを確認してください。それ以外の場合は、TypeScriptバージョンをダウングレードする必要があります。

このガイドもチェックしてください Angularプロジェクトを更新する

bash usersのみの場合

あなたが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/compilerまたはyarn list @angular/compiler
  • Npmで入手可能な最新の安定した@angularバージョンを確認するには、次のコマンドを実行します。
    npm show @angular/compiler version
11
Kuncevič

Npmの公式ページでは、グローバルシナリオとローカルシナリオの両方について、アングルバージョンを更新するための構造化された方法を提案しています。

まず第一に、あなたはあなたのシステムから現在の角度をアンインストールする必要があります。

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

2.キャッシュをクリーンアップする

npm cache clean

EDIT

@candidjが指摘したように

npm 5以降、npm cache cleanは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

これで問題は解決します。

7
Kevin RED

npm-upgrade ：を使用した代替アプローチ

  1. npm i -g npm-upgrade

プロジェクトフォルダに移動します

  1. npm-upgrade check

パッケージをアップグレードするかどうかを尋ねるメッセージが表示されたら、[はい]を選択します。

それは簡単です

4
student

すべてのパッケージを最新バージョンにインストール/アップグレードしたいが、あなたが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）に保存されます。

3
PierreDuc

ここから始めてください。

https://update.angular.io

使用しているバージョンを選択すると、ステップバイステップガイドが表示されます。

すべての手順を確認するには、[詳細]を選択することをお勧めします。複雑さは相対的な概念です - そしてこの機能が誰の愚かな考えなのか私にはわかりませんが、 'Basic'を選択しても必要なステップがすべて表示されず。

enter image description here

バージョン6の時点では、新しいAngular CLIコマンドng updateがあり、これはあなたの依存関係を賢く調べ、正しいものを更新していることを確認するためのチェックを行います:-)

手順はそれを使用する方法の概要を説明します:-)

2
Simon_Weaver

npm uninstall --save-dev angular-cli

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

ng @ update/ngiのアップデート

ng @ update/ng --forceのアップデート

ng角@材料またはnpm i @角/ cdk @ 6 @角/材料@ 6 - 保存

npm install TypeScript @ '> = 2.7.0 <2.8.0'

1
KatyaKrym

最善の方法は、vscodeで拡張子（pflannery.vscode-versionlens）を使用することです。

これはすべての満足度をチェックし、最適をチェックします。

私は私のアプリfunctioining unitllを更新して維持することに関して多くの問題を抱えていました

午後1時

新しく提案された依存関係をインストールする。

0
SamYah

プロジェクトを最新のものに更新しただけの私のように見えるのであれば、これらは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
0
Ernest