Angular 2（npm）を最新バージョンに正しくアップグレードするにはどうすればよいですか？

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

Angular 2ベータ8は終了しました。今度はチュートリアルを再開しました。最新のベータはベータ14です。

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

私が行う場合は、NPMの更新を角度2またはNPM更新が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の最新バージョンを使用することはできません。
開始する必要がある最も一般的なモジュールのリストは、クイックスタートリポジトリにあります。

ノート：

• あなたのパッケージの最新バージョンを最新に滞在するクールな方法を使用しているnpm outdatedかを示しますすべての時代遅れのパッケージ一緒に望んでいたし、最新バージョンで。

• 我々はチェーンに2つのコマンドを必要とする、理由npm update -Dおよびnpm update -S克服することでこのバグを、それが固定されるまで。

Angular2のベータ版からの移行に使用したもう1つの素晴らしいパッケージ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

タイプ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

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フラグ。その場合は、この方法でインストールしたtypescriptのバージョンが現在の角度バージョンでサポートされていることを確認してください。サポートされていない場合は、typescriptバージョンをダウングレードする必要があります。

また、このガイドもご覧ください。Angularプロジェクトの更新

以下のためのbashユーザーのみ

あなたがオンであるMac/Linuxかbash onを実行している場合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 verifynpm 5以降に名前が変更されます

3.angularをグローバルにインストールする

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 update @ angular / materialまたはnpm i @ angular / cdk @ 6 @ angular / material @ 6 --save

npm install typescript @ '> = 2.7.0 <2.8.0'

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

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

私は私のアプリ機能を更新して維持することに多くの問題を抱えていました私は詳細なレンズにチェックさせてから実行しました

npm i

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

あなたがプロジェクトを最新のものに更新しただけで私のように見えている場合、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