web-dev-qa-db-ja.com

Angular 5への更新

Angular 5に更新する方法は？これは私のpackage.jsonからです：

"dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "TypeScript": "~2.3.3"
}

npm installを実行するとこのエラーが発生します

npm ERR！ Windows_NT 6.1.7601 npm ERR！ argv "C：\ Program Files\nodejs\node.exe" "C：\ Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" npm ERR！ノードv6.11.2 npm ERR！ npm v3.10.10 npm ERR！コードETARGET

npm ERR！ notarget互換性のあるバージョンが見つかりません：@ angular/common @ 5.0.0 npm ERR！ notarget有効なインストールターゲット：npm ERR！ notarget 5.0.0-rc.0、5.0.0-beta.7、5.0.0-beta.6、5.0.0-beta.5、5.0.0-beta.4、5.0.0-beta.3、5.0 .0-beta.2、5.0.0-beta.1、5.0.0-beta.0、4.4.4、4.4.3、4.4.2、4.4.1、4.4.0-RC.0、4.3.6 、4.3.5、4.3.4、4.3.3、4.3.2、4.3.1、4.3.0、4.3.0-rc.0、4.3.0-beta.1、4.3.0-beta.0、4.2 .6、4.2.5、4.2.4、4.2.3、4.2.2、4.2.1、4.2.0、4.2。 0-rc.2、4.2.0-rc.1、4.2.0-rc.0、4.2.0-beta.1、4.2.0-beta.0、4.1.3、4.1.2、4.1.1、 4.1.0、4.1.0-rc.0、4.1.0-beta.1、4.1.0-beta.0、4.0.3、4.0.2、4.0.1、4.0.0、4.0.0- rc。 6、4.0.0-rc.5、4.0.0-rc.4、4.0.0-rc.3、4.0.0-rc.2、4.0.0-rc.1、4.0.0-rc.0、 4.0.0-beta.8、4.0.0-beta.7、4.0.0-beta.6、4.0.0-beta.5、4.0.0-beta.4、4.0.0-beta.3、4.0 0-beta.2、4.0.0-beta.1、4.0.0-beta.0、2.4.10、2.4.9、2.4.8、2.4.7、2.4.6、2.4.5、2.4.4、 2.4.3、2.4.2、2.4.1、2.4.0、2.3.1、2.3.0、2.3.0-rc.0、2.3.0-beta.1、2。3.0-beta.0、2.2。 4、2.2.3、2.2.2、2.2.1、2.2.0、2.2.0-rc.0、2.2.0-beta.1、2.2.0-beta.0、2.1.2、2.1.1、 2.1.0、2.1.0-rc.0、2.1.0-beta.0、2.0.2、2.0.1、2.0.0、2.0.0-r c.7、2.0.0-rc.6、2.0 .0-rc.5、2.0.0-rc.4、2.0.0-rc.3、2.0.0-rc.2、2.0.0-rc.1、2.0.0-rc.0、0.0.0 -7、0.0.0-6、0.0.0-5、0.0.0-4、0.0.0-3、0.0.0-2、0.0.0-1、0.0.0-0 npm ERR！ notarget npm ERR！ notargetこれは、おそらくnpm自体の問題ではありません。 npm ERR！ notargetほとんどの場合、ユーザーまたは依存関係の1つがnpm ERR！を要求しています。 no存在しないパッケージバージョンをターゲットにします。 npm ERR！ notarget npm ERR！ notarget 'gizza'の依存関係として指定されましたnpm ERR！ターゲットなし

Angular 5はまだベータ版ですが、テストしたいのですが

EDIT：2017年11月1日からバージョン5.0.0が存在するようになりました

javascriptnode.jsangularnpmangular5
40
Melchia

編集：バージョン5.0.0は2017年11月1日の時点で存在します

NPMは5.0.0が存在しないことを通知しています。 package.jsonを5.0.0-rc.0などの推奨リリース候補のいずれかに変更します。それらがすべて正確ではない可能性が高いので、npmエラーを読んでください。この場合、実際に役立ちます。

"dependencies": {
    "@angular/animations": "5.0.0-rc.0",
    "@angular/common": "5.0.0-rc.0",
    "@angular/compiler": "5.0.0-rc.0",
    "@angular/core": "5.0.0-rc.0",
    "@angular/forms": "5.0.0-rc.0",
    "@angular/http": "5.0.0-rc.0",
    "@angular/platform-browser": "5.0.0-rc.0",
    "@angular/platform-browser-dynamic": "5.0.0-rc.0",
    "@angular/router": "5.0.0-rc.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "TypeScript": "~2.3.3"
}
15
rjustin

現在のように、angular 5は2017年1月11日に正式にリリースされたため、古いangleアプリケーションをangular 5に更新したい人のために：

1）Angularチームも 便利なツール を追加して、あらゆるバージョンからAngler 5へのアップグレードを可能な限り簡単にしました。

2）すべてのアンギュラーパッケージをバージョン5.0にアップグレードする必要があります。次のコマンドを実行します。

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 zone.js@^0.8.4 @angular/upgrade@^5.0.0 [email protected] rxjs@^5.5.2

3）Angular 5もTypeScript 2.4.2およびRxJS 5.5.2に依存するようになったため、これらのパッケージもアップグレードする必要があります。

npm install [email protected] --save-exact

4）日付、通貨、小数、またはパーセントパイプに依存している場合、5では形式に小さな変更があります。 en-us以外のロケールを使用するアプリケーションの場合、それをインポートし、オプションで@ angular/common/i18n_data/locale_frおよびregisterLocaleData（local）からlocale_extended_frをインポートする必要があります。パイプ破壊の変更の詳細については、 https://stackoverflow.com/a/47263949/2810015

5）ライフサイクルイベントでの拡張の代わりに実装の使用：extends OnInitを使用しないか、ライフサイクルイベントでextendsを使用してください。代わりにimplementsを使用してください。

6）HttpModuleおよびHttpサービスからHttpClientModuleおよびHttpClientサービスに切り替えます。 HttpClientは、デフォルトのエルゴノミクスを単純化し（jsonにマッピングする必要がなくなり、map(res => res.json())呼び出しは不要になりました）、型指定された戻り値とインターセプターをサポートするようになりました。

7）RxJS 5.5で演算子をインポートする推奨方法は、rxjs/operatorsからです。

import { map, filter, mergeMap, tap } from 'rxjs/operators';

私はもっと説明しようとしました ここ 。https://onlyforcoder.blogspot.in/2017/11 /angular-5-upgrade-your-project-To-Angular5.html

55
Nimish goel

編集：これは、最新のAngular 5つの作業依存関係です。

  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "TypeScript": "~2.5.3"
  }

貼り付けてnpm installを実行するだけです

12
Melchia

Angular upgrade guide からコマンドを貼り付けても同じエラーが発生しました。

最終的には、バージョンを最新に変更しただけで機能しました。

npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest rxjs@latest --save

npm install [email protected] --save-exact

入力しても、このエラーが発生する理由はわかりません

 npm view @angular/core versions --json

バージョンが実際に存在することがわかります。私の唯一の理論は、多分それは私がWindows上にいて、NPMのWindowsバージョンがそれらのバージョン番号を好きではないということです...

3
Diskdrive

@Vishal Gulatiによるオリジナルの回答： https://stackoverflow.com/a/47132265/687718

クイック概要：

Angularをすべてのパッケージとともに最新バージョンにアップグレードします。

npm install [email protected] --save-dev
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest --save

必要に応じてCLIをアップグレードします

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

バージョン5.2.0でAngular CLIを更新するコマンドは次のとおりです。

npm install @ angular/compiler-cli @ 5.2.0

2
Sheo Dayal Singh

この問題は、npmバージョンが原因で発生します。Angular 5で動作するには、

"node": ">=6.9.5 <7.0.0",
"npm": ">=3.10.7 <4.0.0",
"yarn": ">=1.0.2 <2.0.0"
1
Dr. Geek

更新する前に、テンプレートタグの名前をng-templateに変更します。

すべての依存関係を最新のAngularおよびTypeScriptの正しいバージョンに更新します。 Windowsを使用している場合は、次を使用できます。

npm install @ angular/animations @ '^ 5.0.0' @ angular/common @ '^ 5.0.0' @ angular/compiler @ '^ 5.0.0' @ angular/compiler-cli @ '^ 5.0.0' @angular /core@'^5.0.0 '@ angular/forms @' ^ 5.0.0 '@ angular/http @' ^ 5.0.0 '@ angular/platform-b​​rowser @' ^ 5.0.0 '@ angular/platform-b​​rowser -dynamic@'^5.0.0 '@ angular/platform-server @' ^ 5.0.0 '@ angular/router @' ^ 5.0.0 '[email protected] rxjs@'^5.5.2'

npm install [email protected] --save-exact

1
Lijo

基本的に、それを達成するための重要なステップはほとんどありません。

  1. Angular CLIを最新バージョンにアップグレードします。
  2. Angular 4アプリの依存関係を変更し、依存関係を更新します。

これで、Angular 4アプリをAngular 5に簡単にアップグレードできます 続きを読む

1
Mohit Tanwani