web-dev-qa-db-ja.com

Angular CLIプロジェクトをアップグレードするにはどうすればいいですか？

Angular 2プロジェクトを2.0.0から2.4.1にアップグレードしようとしています。セマンティックバージョニングは、2.0.0リリースと2.x.xリリースから採用されてきましたが、これはドロップインの代替品になるはずです。私の経験はそうでないことを示しているようです。多分私はちょうど私が何をしているのかわからないが、私はこれが簡単であることがわかりませんでした...

試行1 - 手動バージョンアップグレード

私の最初の単純なアプローチは、私の@angular依存関係を手動で更新することでした。あなたは私のpackage.jsonを以下で参照することができます（更新1）。私はこれらの変更を行い、それからnpm installをしました、そして、私がng serveをしようとしたとき、私はいくつかの警告を受けて、そして以下のエラーを得ました。

未定義のプロパティ 'AssetUrl'を読み取れません

そして私の警告...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"win32","Arch":"x64"})
npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/[email protected] requires a peer of zone.js@^0.7.2 but none was installed.
npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @ngtools/[email protected] requires a peer of @angular/compiler-cli@^2.3.1 but none was installed.
npm WARN @ngtools/[email protected] requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed.
npm WARN @ngtools/[email protected] requires a peer of webpack@^2.1.0-beta.25 but none was installed.

それで、私はこれらの警告を直そうとするウサギの穴を掘り下げましたが、それらすべてを直す方法を知りません（例えば@ ngtools/webpack）そしてそれらのいくつかは互いに衝突しているようです。それで私は私のAngular 2バージョンをアップデートする手動のアプローチをやめました...

オリジナルのpackage.json

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "TypeScript": "2.0.2",
    "typings": "1.4.0"
  }
}

package.jsonのアップデート1

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "TypeScript": "2.0.2",
    "typings": "1.4.0"
  }
}

試み2 - npm-check-updatesを使う

私が更新のために私の角度依存性をチェリー選択しようとしたとき、私は更新される必要がある他の依存性のクモの巣になったので、私は次にすべてを更新しようとしました。

この答えに基づいて 私は以下を試しました：

npm i -g npm-check-updates
npm-check-updates -u
npm install

これで問題はありませんでしたが、ng serveを実行しようとすると、次のエラーが発生します。

AppModuleのエラーはNgModuleではありません

ここで集めた情報 を使って 、TypeScriptのバージョンを下げたので、そのエラーはなくなりましたが、新しいエラーが発生しました。

シンボル値の静的解決でエラーが発生しました。エクスポートされていない関数への参照（元の.tsファイルの位置29:10）、rest-paths.ts内のシンボルrestPathの解決、app.module.ts内のシンボルAppModuleの解決、app.module.ts内のシンボルAppModuleの解決

私はこれらのエラーを通して私の道を戦ってきました、しかし私がそれほど多くの問題を抱えているという事実は赤い旗を掲げることです。

誰か助けてもらえますか？私は間違ったアプローチを取っていますか？

Angular-Cliをアンインストールしてそれを再インストールすることをお勧めします。それからng initを実行して設定ファイルを上書きすることをお勧めします。私はすでに最新版を持っていたので、これは私にはうまくいきませんでした。

編集：最新の角度クリップを持つことについての記述は正しくありませんでした。この編集時点で最新のものは1.0.0-beta.24ですが、私はAngular-Cliのバージョン1.0.0-beta.16を持っていました。それにもかかわらず、私は私の既存のプロジェクトで私のAngular-Cliを更新してng initを実行しようとしました。 Angular-Cli Githubのページで説明されている手順に正確に従っていないことに気付きました。 npmのインストール--save-dev angular-cli @ latestをスキップし、それらが概説するrmコマンドを使用する代わりに、私のすべてのnode_moduleを吹き飛ばしました。

angularangular-cli
63
The Gilbert Arenas Dagger

便利：

関連するアップグレードガイドについては、公式 Angular Update Guide を使用して現在のバージョンとアップグレード先のバージョンを選択してください。 https://update.angular.io/

Angular CLIの変更点の比較については、GitHubリポジトリ Angular CLI diff を参照してください。 https://github.com/cexbrayat/angular-cli-diff/

更新26/12/2018：

上記の便利なセクションに記載されている公式 Angular Update Guide を使用してください。アップグレード中に役立つ可能性がある他のリソースへのリンクを含む最新の情報を提供します。

更新日08/05/2018：

Angular CLI 1.7ではng updateが導入されました。

ngアップデート

新しいAngular CLIコマンド。プロジェクトを最新バージョンで最新の状態に保つのを簡単にします。パッケージはあなたのプロジェクトに適用されるロジックを定義して最新の機能を確実に使用するようにするだけでなく、重大な変更による影響を軽減または排除するように変更を加えることもできます。

アップデートの設定情報はこちら にあります

1.7から6までの更新

CLI 1.7は自動v6アップデートをサポートしません。パッケージマネージャから手動で@ angular/cliをインストールしてから、アップデート移行の回路図を実行してプロセスを終了します。

npm install @angular/cli@^6.0.0
ng update @angular/cli --migrate-only --from=1

更新30/04/2017：

1.0アップデート

Angular CLI移行ガイドに従ってください。

更新日2017/04/04：

RCアップデート

Angular CLI RC移行ガイドに従ってください。

更新20/02/2017：

1.0.0-beta.32では重大な変更がありng init and ng updateが削除されています。

ここでのプルリクエストは次のように述べています。

BREAKING CHANGE：現在の実装では解決するよりも多くの問題が発生するため、ng init＆ng updateコマンドを削除しました。アプリケーションの手動更新が必要になるまで、更新機能はCLIに戻ります。

Angular-cli CHANGELOG.md は、次のように述べています。

BREAKING CHANGES - @ angular/cli：現在の実装では解決できないほど多くの問題が発生するため、ng init＆ng updateコマンドを削除。 RCがリリースされたら、最新バージョンのCLIをインストールするのと同じくらい簡単になるので、これらを使用して更新する必要はもうありません。

更新17/02/2017：

Angular-cliがNPM @angularパッケージに追加されました。あなたは今、次のもので上記のコマンドを置き換える必要があります -

グローバルパッケージ：

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest

ローカルプロジェクトパッケージ：

rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng init

元の回答

GitHubの README.md から angular-cli で角度を更新するための手順に従うべきです。

どうぞ：

angle-cliの更新

Angular-cliを新しいバージョンに更新するには、グローバルパッケージとプロジェクトのローカルパッケージの両方を更新する必要があります。

グローバルパッケージ：

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

ローカルプロジェクトパッケージ：

rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp
npm install --save-dev angular-cli@latest
npm install
ng init

ng initを実行すると、ng newによって作成されたすべての自動生成ファイルの変更がチェックされ、自分のファイルを更新できるようになります。変更されたファイルごとに4つの選択肢があります。y（上書き）、n（上書きしない）、d（ファイルと更新されたファイルの差分を表示）、およびh（ヘルプ）です。

各コードファイルの差分を注意深く読み、変更を受け入れるか、またはng initの終了後にそれらを手動で組み込んでください。

80
J J B

JJBの回答で私は正しい方向に進みましたが、アップグレードはあまりうまくいきませんでした。私のプロセスは以下の通りです。うまくいけば、プロセスが将来簡単になり、JJBの回答を使用できるようになるか、もっと簡単なことができるようになります。

ソリューション詳細

角度クリップを正確に更新するために、JJBの回答の中で捉えたステップに従った。しかし、npm installを実行した後、angular-cliは壊れていました。 ng versionを実行しようとしてもエラーが発生します。だから私はng initコマンドを実行できませんでした。下記のエラーを参照してください。

$ ng init
core_1.Version is not a constructor
TypeError: core_1.Version is not a constructor
    at Object.<anonymous> (C:\_git\my-project\code\src\main\frontend\node_modules\@angular\compiler-cli\src\version.js:18:19)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    ...

任意のangular-cliコマンドを使用できるようにするには、私のpackage.jsonファイルを手動で更新し、@angular依存関係を2.4.1にバンプしてから、別のnpm installを実行する必要があります。

この後、私はng initをすることができました。設定ファイルを更新しましたが、app/*ファイルがありません。これが行われたとき、私はまだエラーを受けていました。最初のものは以下に詳述されています、2番目は同じタイプのエラーでしたが、異なるファイルにありました。

シンボル値の静的解決でエラーが発生しました。関数呼び出しはサポートされていません。 C：/ _ git/my-project/code/src/main/frontend/src/appのシンボルAppModuleを解決して、関数またはラムダをエクスポートされた関数（元の.tsファイルの62：9の位置）への参照に置き換えることを検討してください。 /app.module.ts

このエラーは私のAppModuleの次のファクトリープロバイダーに結びついています

{ provide: Http, useFactory: 
    (backend: XHRBackend, options: RequestOptions, router: Router, navigationService: NavigationService, errorService: ErrorService) => {
    return new HttpRerouteProvider(backend, options, router, navigationService, errorService);  
  }, deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
}

このエラーに対処するために、私はエクスポートされた関数を使用して、そしてプロバイダーに以下の変更を加えました。

    { 
      provide: Http, 
      useFactory: httpFactory, 
      deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
    }

... // elsewhere in AppModule

export function httpFactory(backend: XHRBackend, 
                            options: RequestOptions, 
                            router: Router, 
                            navigationService: NavigationService, 
                            errorService: ErrorService) {
  return new HttpRerouteProvider(backend, options, router, navigationService, errorService);
}

概要

私が最も重要な詳細であると理解していることを要約するために、以下の変更が必要でした：

  1. JJBの回答（およびそれらのgithubページ）に詳述されている手順を使用して、Angular-Cliバージョンを更新します。

  2. 手動で@angularバージョンを更新している、2.0.0はangular-cliバージョン1.0.0-beta.24によってサポートされていないようでした。

  3. Angular-cliとng initコマンドの助けを借りて、私は自分の設定ファイルを更新しました。重要な変更はangular-cli.jsonとpackage.jsonにあったと思います。一番下の設定ファイルの変更を見てください。

  4. ソリューションの詳細に記載されているように、エクスポート関数を参照する前にコードを変更します。

主な構成の変更

angular-cli.jsonの変更

{
  "project": {
    "version": "1.0.0-beta.16",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
...

に変更しました...

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
...

Ng-initで使われているバージョンを考慮した手動マージの後、私のpackage.jsonはこのように見えます。私のAngularバージョンは2.4.1ではないことに注意してください、しかし私がした後の変更は2.3で導入されたコンポーネントの継承でしたので、私はこれらのバージョンで大丈夫でした。元のpackage.jsonが問題になります。

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/lodash": "^4.14.39",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "TypeScript": "~2.0.3",
    "typings": "1.4.0"
  }
}
4
The Gilbert Arenas Dagger

Angular CLIの組み込み機能を使用するだけです

ng update

最新バージョンにアップデートする。

3
Nicolas Henneaux

こちらのドキュメントによると http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html あなたただ実行できるはずです...

npm install @ angular/{common、コンパイラ、compiler-cli、コア、フォーム、http、プラットフォームブラウザ、プラットフォームブラウザ動的、プラットフォームサーバ、ルータ、アニメーション} @latest TypeScript @ latest --save

私はそれを試してみました、そして私のzone.jsとngrx/storeライブラリがより古いバージョンであることによる２、３のエラーを得ました。

それらを最新バージョンのnpm install zone.js@latest --saveとnpm install @ngrx/store@latest -saveに更新し、それから角度のあるインストールを実行することは私にとってはうまくいきました。

1
Matt Sugden

削除します。

npm uninstall -g angular-cli

（糸で）再取り付け

# npm install --global yarn
yarn global add @angular/cli@latest
ng set --global packageManager=yarn  # This will help ng-cli to use yarn

（npmで）再インストール

npm install --global @angular/cli@latest

もう1つの方法は、グローバルインストールを使用せずに、PATHに/node_modules/.binフォルダを追加するか、npmスクリプトを使用することです。アップグレードするのはもっと柔らかいでしょう。

0
Nicolas Zozol