キーポイント
npm install -g @angular/cli@latest
HttpModuleに置き換えて、新しいHTTPCLIENTの自動JSON処理とHTTPインターセプターのサポートを活用します。 HttpClientModule
rxjs/operatorsメソッドでRXJS Pipetableオペレーターを使用して適用します。 .pipe()
ng serve属性をチェックして、アプリケーションの機能と角度バージョンを確認します。 ng-version
この記事は、Angular CLIを使用してCRUDアプリケーションを作成する方法について説明するSitePoint Angular 2チュートリアルのパート6です。
パート4では、Angularルーターを導入し、ブラウザーURLが変更されたときにルーターがアプリケーションを更新する方法と、バックエンドAPIからのデータを解析するためにルーターを使用する方法を学習します。
パート5では、アプリケーションに認証を追加し、アプリケーションのさまざまな部分を許可されていないアクセスから保護する方法を学びました。心配しないでください！パート6を理解するために、このチュートリアルのパート1、2、3、4、または5に従う必要はありません。単にコードベースのコピーを取り、パート5のコードを見て、開始点として使用できます。これについては、以下で詳しく説明します。
Angularのターゲットの更新を開始するには、Angular CLIの最新バージョンがインストールされていることを確認してください。そうでない場合は、次のコマンドでインストールできます。
npm install -g @angular/cli@latest
の後、パート5のコードのコピーが必要です。これはGitHubで利用できます。このシリーズの各投稿には、リポジトリに対応するタグがあるため、このアプリの異なる状態間で前後に切り替えることができます。
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
パート5の最後に使用したコードと、この記事で始めたコードは、パート5とマークされています。この記事を終了するために使用したコードは、パート6とマークされています。
特定のコミットIDのエイリアスとしてタグを扱うことができます。 Git Checkoutを使用してそれらを切り替えることができます。詳細については、こちらをご覧ください。したがって、起きて実行するには（Angular CLIの最新バージョンをインストール）、次のことを行います。
次に、
https://www.php.cn/link/d111f133fa0ea545d48291f9b0a72b2dgit clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
angular
角度アプリケーションを更新する方法についての正確な指示はどこにありますか
一方で、Angularは、ミッションクリティカルなアプリケーションに最大の安定性を提供するように設計されています。一方、Webテクノロジーの最新の変更をサポートするために、適応および進化する必要があります。
時間ベースのリリースサイクルは、数週間または数ヶ月ごとに新しい角度バージョン（Angular 5、Angular 6、Angular 7など）が期待できることを意味します。
セマンティックバージョンの意味では、Angularのバージョン番号を使用すると、アップグレードした場合にアプリケーションが壊れるかどうかを予測できます。
本質的に、セマンティックバージョンはメジャーバージョンです。
したがって、バージョンv1.3.8のプライマリバージョン値は1、セカンダリバージョン値は3、改訂値は1です。
新しいバージョンがリリースされると、新しいバージョンはコードに加えられた変更のタイプを暗黙的に示します。
セマンティックバージョンを追加するとき、次のルールが適用されます。
npm install -g @angular/cli@latest
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
セマンティックバージョンに慣れていない場合は、このシンプルなセマンティックバージョンガイドを必ずチェックしてください。
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
新しい改訂が毎週リリースされます
新しい転覆が毎月リリースされます
しかし、新しいメジャーバージョンが表示された場合はどうなりますか？
Angular Update Guide
主要なバージョンが大きな変化をもたらす可能性があることを学びました。それで、私たちがそれを更新した場合、既存のアプリケーションが壊れるかどうかをどのようにして知ることができますか？
1つの方法は、公式の変更ログを読み、変更リストを表示することです。
Angular Todoアプリケーションでは、Angular 4.0からAngular 5.0にアップグレードしたいと考えています。
アプリケーションの複雑さレベルを選択してみましょう
Advanced
。
アプリケーションを更新するために必要なすべての手順の完全な概要を取得しました。 素晴らしい！
更新する前の 
更新する前の
npm install -g @angular/cli@latest
Up and Runningセクションの最新バージョンに更新したため、ローカルバージョンも更新しました。 アプリケーションが正しく実行されていることを確認するには、実行されます。
npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latest
開始に失敗した場合は、
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
ディレクトリとng serveファイルを再現します。 node_modules
更新後package-lock.jsonnpm install
node_modulespackage-lock.json更新の後、
に切り替えます RXJSオペレーターをRXJS/オペレーターからインポートし、RXJSパイプラインオペレーターを使用します
Angularバージョン5.0.0のリリースノートを確認すると、Angular 4.3以降がJSON応答を自動的に処理してHTTPインターセプターをサポートする新しいHTTPClientが付属していることがわかります。
を開いて、httpmodule：
を交換しましょう
map(res => res.json()) httpclientModuleを使用：
src/app/app.module.ts次に、新しいHTTPCLIENTが私たちの応答を自動的に解析するため、HTTPサービスの代わりにHTTPCLIENTサービスを使用し、コード内のすべての
<code> v0.0.3 // 修复错误前 v0.0.4 // 修复错误后</code>
では、1つのファイルを更新するだけである必要があるため、
<code> v0.2.4 // 添加新功能前 v0.3.0 // 添加新功能后</code>
map(res => res.json())使用法：
httpmoduleの古いクラスをhttpclientmoduleの新しいクラスに置き換えます。
より具体的には、次のものを置き換えます
import { Http, Headers, RequestOptions, Response } from '@angular/http';import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';ResponseHttpErrorResponseHeadersHttpHeadersreturn new RequestOptions({ headers });return { headers };実行する場合：
npm install -g @angular/cli@latest
https://www.php.cn/link/03e03424a898e574153a10db9a4db79aにブラウザをナビゲートします。 プロジェクト2を解決する時が来ました：RXJS/オペレーターからRXJSオペレーターをインポートし、RXJSパイプラインオペレーターを使用します。
RXJSパイプラインオペレーターの使用バージョン5.5から始めて、RXJSには配管可能な演算子が付属しています。公式文書には次のように書かれています
pipeableオペレーターは、次の署名で関数を返す機能です：
…（複数！）。また、必要な観察可能な作成方法を直接抽出することもお勧めします。以下に示すように、使用範囲：ポジションから必要なオペレーターを抽出します（
<T, R>(source: Observable<T>) => Observable<R>
rxjs/operators
これは複雑に聞こえますが、基本的には以前に鎖の方法を使用した場所を意味します。ここで、npm uninstall -g @angular/cli angular-cli npm cache clean npm install -g @angular/cli@latestログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピー
メソッドを使用してオペレーターをインポートし、それらを適用する必要があります：
git clone git@github.com:sitepoint-editors/angular-todo-app.git cd angular-todo-app git checkout part-5 npm install ng serve
配管可能な演算子の主な利点は次のとおりです
rxjs/operators
.pipe()彼らはツリーシャッキングであり、ツールが未使用のコードを削除してアプリケーションパッケージのサイズを削減できるようにします。
<code> v0.0.3 // 修复错误前 v0.0.4 // 修复错误后</code>
を開いて、apiservice：.pipe()を更新しましょう
からインポートし、src/app/api.service.tsのすべての発生を
<code> v0.2.4 // 添加新功能前 v0.3.0 // 添加新功能后</code>
次に、同じ変更をtodoscomponentに適用するためにrxjs/operatorsを開きましょう。
map
同様に、map(fn)からpipe(map(fn))に更新して
src/app/todos/todos.component.tsそれだけです！ Angular Update Guideが指示するように、当社のアプリケーションのチェーンズオペレーターは、配管可能な演算子に置き換えられました。
Angularは、実行中のバージョンの値を使用して、
に追加します。 Angular 5.2.9を実行していることを示しています。 ng-version
app-rootミッションが完了しました！当社のアプリケーションは、Angular 5.2.9に正常にアップグレードされました。 ng-version="5.2.9"
要約
最初の記事では、どのように学びましたか：
Angular Cli
を使用してTODOアプリケーションを初期化します単一のtodo
API URLを環境変数として保存する
javaScriptルーターとは？
Angularを更新する方法に関するこの記事では、
ng-version
コマンドを導入して、Angularアプリケーションを更新します。もう一度詳細が利用可能になりました。この新しいコマンドが私たちの生活をどのように容易にするかについてのフォローアップ記事を提供します。 ng update
この前に、この記事を最新バージョンにAngularアプリケーションを更新する方法に関するガイドとして使用できます。
皆様のご多幸をお祈り申し上げます。
Angular Projects（FAQ）
の更新に関するFAQAngularプロジェクトを更新するための前提条件は何ですか？
node -vAngularプロジェクトを特定のバージョンに更新するにはどうすればよいですか？ npm -v
npm install -g @angular/cliAngular Projectを特定のバージョンに更新するには、
更新プロセス中にエラーが発生した場合は、最初にエラーメッセージを理解してみてください。通常、どこでうまくいかなかったかについての手がかりが含まれています。問題を解決できない場合は、Angularコミュニティから助けを求めることを検討してください。 Stackoverflowのようなサイトには、問題のトラブルシューティングに役立つ多くの経験豊富な開発者がいます。エラーに遭遇する前に実行したエラーメッセージやステップなど、できるだけ多くの問題について詳細を提供することを忘れないでください。
ファイルのバージョン番号を変更するだけではないため、少し難しい場合があります。また、他の依存関係をダウングレードし、コードを微調整して古いバージョンと互換性のあるものにする必要がある場合があります。ダウングレードが必要な場合は、Angular Communityの支援を求めるか、プロセスがスムーズに進むようにプロの開発者を雇うことを検討してください。 package.json
コマンドを使用して、--dry-runオプションを使用して、実際にそれらを適用せずにプロジェクトの変更が行われるかを確認することもできます。 ng update
Angularプロジェクトをどのくらいの頻度で更新する必要がありますか？
Angularプロジェクトを更新するときは、
バージョンをスキップできますか？Angularプロジェクトを更新することの利点は何ですか？
JenkinsやTravis CIなどの継続的な統合（CI）ツールを使用して、Angularプロジェクトの更新プロセスを自動化できます。これらのツールは、リポジトリに変更をプッシュするたびに、ng updateコマンドとテストを自動的に実行できます。これは、プロジェクトが常に最新の状態であり、適切に機能することを保証するのに役立ちます。
以上がAngularプロジェクトを最新バージョンに更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
