🈶 👩🏼‍🤝‍👨🏿 🥕 角度5 💇🏾 ⚜️ 💿

はじめに

2017年11月1日、Googleは「五角形ドーナツ」というコードネームのAngular 5.0.0のメジャーバージョンを発表しました。新しいバージョンには、新しい機能とバグ修正が含まれています。同時に、Angularのサイズを小さくして、すばやく簡単に使用できるようにすることに重点が置かれました。重要な変更を含むすべての変更の完全な説明は、公式のAngularリポジトリのchangelogファイルにあります。

翻訳者から

みなさんこんにちは、マキシム・イワノフとドミトリー・セルギエンコフ、そして今日は新しいバージョンについて話し、最も重要な変更のいくつかを簡単にレビューし、Angularの歴史を思い出します。また、このフレームワークを学習し始めたばかりの人のために、アプリケーションをAngularに素早くデプロイする方法の例を見ていきます。 Telegramの国内のAngularコミュニティに参加できるだけでなく、モスクワのAngular Meetupにも参加できます。

角度の歴史

1.1。 AngularJSとその他

1.2。なぜAngular 1.xがまだ好きなのですか？

1.3。それでもAngularはjQueryではありません

1.4。必要なのは... Angularのコア

1.5。では、なぜAngularJSを離れたのですか？

1.6。 AngularJS for Webは何をしましたか？
Angularクイックスタート

2.1。なぜTypeScriptが必要なのですか？

2.2。ステップ1.環境のセットアップ

2.3。ステップ2.新しいプロジェクトを作成する

2.4。ステップ3：開発モードでWebアプリケーションを開始する

2.5。ステップ4：最初の角度コンポーネントの編集

2.6。次は？

2.7。プロジェクトカタログ

2.8。 Angular CLI vs. 手動設定
Angular 5のイノベーション

3.1。改善されたコンパイラ

3.2。最適化されたビルド

3.3。 Angular Universalでのサーバー側レンダリングの改善

3.4。フォームパフォーマンスの改善

3.5。 Pipesのローカライズで書き直されました

3.6。 ReflectiveInjectorをStaticInjectorに置き換える

3.7。優れたNgZone

3.8。マルチエクスポート

3.9。優れたRxJS

3.10。更新されたルーターライフサイクル

3.11。優れたモバイルエクスペリエンス

3.12。重大な変更など

1.角度の歴史

JavaScript環境、アプリケーション、またはシンプルなWebサイトに適したフレームワークを選択することは、ビジネスにとって最優先事項です。 JavaScriptフレームワークの現在の状況により、多くの開発者は、どのキャンプに参加すべきか疑問に思っています。

Angularは、アプリケーションのクライアントロジックを作成するために必要なすべてを提供するオープンソースのJavaScriptフレームワークです。

GoogleがAngularをサポートしているという事実は、それ自体に自信を与えています。
このフレームワークは、精神を壊すことなく他のプログラミング言語から簡単に切り替えることができるように設計されています。
多くの開発者は、Angularコードが複雑に見える場合、それはあなたが何か間違ったことをしていることを意味することに注意します。
AngularJSおよびAngularで記述された多数のWebサイトおよびアプリケーション：YouTube（PS3用）、GoodFilms、Freelancer、Upwork など。

1.1。 AngularJSとその他

ほとんどすべての開発者は、AngularJSがシングルページアプリケーション（SPA）の作成に必要な最初のJavaScriptフレームワークの1つであることを知っています。現在、SPAの出現に驚きはありませんが、SPAはどこにでもあります。しかし、2012（ AngularJS 1.0.0 ）では、それは新しいものでした。 AngularJSはGoogleの発案によるもので、2009年にMITライセンスの下でオープンソースフレームワークとして初めてリリースされました。

Webテクノロジーの使用を測定するSimilarTech.comによると、ReactJSは現在112kのWebサイトで使用され（2017年10月に3.20％増加）、AngularJS（Angularを含む）は542kのWebサイトで使用されています（1.93％の増加））

確かに、現在1万9000サイトで使用されているVueJSの最近の成長に注目する価値があります（28.3％の増加）。

多くの人は、ライブラリとフレームワークを比較するのは間違っていると言います（そして、一部はあなたが正しいでしょう、Angular vs React）が、人々はそうする権利を持っています。 7,000万のサイトで使用されているjQueryに注目し（0.16％増加）、それをすべてと比較し始めると、もちろんそれが常に先頭に立ちますが、同じエンタープライズでは、何を選択するかは明らかですより深刻です。 Mootoolsがレポート期間中に人気を博し始めたことは面白いです（18.5％の増加）。

1.2。なぜAngular 1.xがまだ好きなのですか？

AngularJSにより、アプリケーションの作成を簡単に開始できました

はい、新しいプロジェクトを作成するのはとても簡単でした。リンクをCDNに挿入し、ng-appをhtmlタグに追加するだけで、いくつかのチュートリアルをすばやく学習して、新しいアプリケーションの準備が整います。 ngAnimateやngRouterなどの公式モジュールは、すべての問題を迅速に解決しました。

AngularJSのドキュメントとチュートリアル

AngularJSには、非常に優れたドキュメントと多数の優れたチュートリアルがありました。同じ「Phonecatアプリ」の後、AngularJSの概要と使用方法を完全に理解しました。実際、「Tour of Heroes」よりもはるかに明確でした（現在のチュートリアルはAngular2で書かれており、クイックスタートではSystemJSを使用し、Angular CLIではWebpackを使用しています）。新しいAngularでは、この問題はすぐに解決されます。

AngularJSは最初からモジュール化されていました（1.xバージョン）

誰もがBrowserifyとBowerを使用した時間を覚えていますか？当時、Webpackのようなビルドシステムはありませんでした。はい、その時点で、もちろん、GruntとGulpは存在していましたが、それらは、たとえばgulp-browserifyを使用することを目的としていました。そこで、正式にBrowserifyを使用しました。それでも、AngularJSのng.moduleは非常に重要な機能でした。スクリプトへのリンクを挿入するだけで、それらは1つのアプリケーションのモジュールとして解釈されました。素晴らしいモジュラーシステムでした。 jQuery（$ .fn.myNewAwesomePluginForJQueryThatNobodyDownloads）とは異なり、AngularJSは独自のモジュールを作成し、それらをプラグインまたはアプリケーションの一部として使用する機能を提供しました。さらに、遅延読み込みという形で非常に便利でした。

1.3。それでもAngularはjQueryではありません

ほとんどすべての記事がAngularJSとjQueryを比較した時期を今でも覚えています。多くの開発者がjQueryを使用してAngularJSに切り替え始めました。ただし、jQueryを悪いコードに関連付けてjQueryについて考えることはまったく気になりません。

オブジェクトとモデルの双方向バインディングは、「キラー機能」または単なる「キラー」でしたか？

ng-model-オブジェクトを$ scopeオブジェクトとDOM要素に関連付けました-これは同時に「キラー機能」と「キラー」でした：

1）双方向のデータバインディング-「キラー機能」を簡単に実装できます。

2）経験の浅い開発者は、各変数をコントローラーの$ scope-objectに結び付け、その後、「アプリケーションの実行速度が遅いのはなぜですか？」

一方向データバインディングはバージョン1.2で導入されましたが、すべての開発者がそれを知っているわけではありません。

jqLite-フレームワーク内のミニチュアjQueryの代替

jqLiteは、AngularJSがクロスブラウザでDOMを操作できる、API互換の小さなjQueryサブセットです。 jqLiteは、マイナーな要件をカバーするために、最も一般的に使用される機能のみを実装しました。主なパラダイムは、ディレクティブとコンポーネントでした。

したがって、あなたは世話をされ、jQueryのフルバージョンを含める必要はありません。 jqLiteは必要なすべてを提供します。しかし、待ってください...あなたは本当にこれが必要ですか？

DOM操作は、angular.elementを介してのみアクセス可能な小さなライブラリに移動されました。これは新しいレベルの抽象化への一歩でしたか？たぶん。

コンポーネントモデル

コンポーネントモデルを実装する最初の試みは、AngularJSでした。しかし、ReactJSとは異なり、AngularJSは「JS in HTML」ではなく「JS in HTML」でした。 AngularJSのモットーでさえ、「AngularJSはWebアプリケーション向けに改善されたHTMLです！」と語っています。

「JS in HTML」を使用する理由簡単です。アプリケーションの.htmlファイルでng-click、ng-for、ng-classなどのディレクティブを使用しました。

ディレクティブは、小さなモジュールで一般的に使用されるコンポーネントを分離する最初の試みでした。ただし、このベンチャーは、Angular 1.5で実装されたReactのようなコンポーネントのために失敗しました。おそらく、Reactがこの戦いに勝ったのは、一度file-name.htmlが次のようになる可能性があるためです（Angularで作業するときに最大の問題を示す悪いコード）。

1.4。必要なのは... Angularのコア

インラインディレクティブ

必要なディレクティブがすべて揃っている場合は、車輪を再発明する必要はありません。私自身の経験から、一部の開発者はディレクティブをまったく作成しませんでした。上記のng-clickおよびng-forで述べたように、単に組み込みのAngularJSディレクティブを使用しました。

JavaScript依存性注入

AngularJSの非常に興味深い機能の1つは、依存性注入です。ところで、AngularJSを除いて、他のプロジェクトで見たことがありますか？

AngularJSは巨大です

実際、次の質問を検討しても意味がありません。

1）「AngularJSのサービス、工場、プロバイダー」。

2）「Angularアプリケーションを減らす方法」

3）「$スコープはどのように機能しますか。

4）「AngularJSの仕組み」

5）「ビルトイン$ http、フィルタリング、ng-forパフォーマンス」;

6）「AngularJSの最大の問題は何ですか？」;

...長いリスト

いくつかの質問は非常に素晴らしく、それらについて学術研究を行うことができます。

1.5。では、なぜAngularJSを離れたのですか？

1）すぐに使用できるパフォーマンスはあまり良くありません。

2）AngularJSのほとんどの機能は実際には使用されませんでした。

3）AngularJSは、たとえばVirtualDOMではなく、DOMと直接連携しました。

4）低レベルの抽象化。AngularJSでは、ほとんどすべてのロジックがHTMLに関連付けられていました。

5）フレームワーク自体が巨大な場合、AngularJSの専門家になることは困難です。

6）最新のWebには新しいアプローチが必要でした。

1.6。 AngularJS for Webは何をしましたか？

これは、同時に単純で複雑な質問です。

JS ===パワー

おそらく、AngularJSはJavaScriptが強力な言語であることを証明した最初のツールでした。通常、「JavaScriptは子供向けの言語」または「JSは愚かなアニメーションを作成する言語です」と聞くことができますが、これらの神話はすべてAngularJSによって破壊されました。

コミュニティ、専門家、エコシステム

1）良いフレームワーク=>多くの開発者。

2）多くの開発者=>大規模なコミュニティ。

3）大規模なコミュニティ=>追加のコンポーネント、ツール、チュートリアル。

4）多数のツールと実践=>多くの専門家。

5）多くの専門家=>新しいアイデア、モジュール、ライブラリ。

6）純粋な進歩...

Vue、Aurelia、Angular 2/4/5

これらのフレームワークはすべて、AngularJSに触発されました。 Aureliaは、AngularJSのフォークです。 Angular（Angular 2+）は、AngularJSの続きです。一部の開発者は、v-if、v-bind、v-on、およびその他のディレクティブのために、VueJSを新しいAngularJSと呼びます。

あなたはまだAngularJSを覚えていますか？

2. Angular QuickStart

優れた開発ツールを使用すると、すべてを手動で行いたい場合でも作業が快適になります。 Angular CLIは、プロジェクトの作成、ファイルの追加、およびテスト、アセンブリ、展開などの多くの特定のタスクをすばやく実行できるコマンドラインインターフェイスです。

このセクションの主な目標は、Angular CLIを使用して簡単なAngularベースのTypeScriptアプリケーションを作成および実行し、Angularプロジェクトを指定および標準化する公式のスタイルガイドガイドラインを引き続き遵守することです。最後に、CLIを使用してアプリケーションを開発する方法の基本を理解します。ただし、最初にTypeScriptが必要な理由を判断しますか？

2.1。なぜTypeScriptが必要なのですか？

TypeScriptはJavaScript（ES6 / ES7 / ES8 / ...）+型情報です。つまり、ES6 +を知っていれば、TypeScriptを自動的に知っています（タイプといくつかのニュアンスに関する情報のみが追加されますが、一般的には厳密に標準に従います）。 TypeScriptはDartではなく、異なる言語です。これはJavaScriptのアドオンであり、複雑さの管理を改善し、非常に大きなプロジェクト（それ自体が非常に大きなプロジェクトであるAngular自体など）内で静的分析を取得し、注釈、タイピング、継承、インターフェースを使用できます。 -モジュール。大規模なプロジェクトでは、この情報を使用して、膨大なエラーを取り除くことができます。インターネット上でTypeScriptアプリケーションを作成するための例とチュートリアルは数多くありますが、今回のケースでは、Webpackビルドシステムの制御下で実行される基本的なスターターキットを用意しました。

2.2。ステップ1.環境のセットアップ

開発を開始する前に、環境を構成する必要があります。 Node.jsとnpm （まだインストールしていない場合）をコンピューターにインストールします。 6.9.x以上のNode.jsバージョンと3.xx以上のnpmを使用していることを確認します（このため、ターミナルでnode -vおよびnpm -vを実行するだけで十分です）。

次に、Angular CLIをグローバルにインストールします。

npm install -g @angular/cli

原則として、この手順は1回実行され、将来的にはその実装は不要になります。

2.3。ステップ2.新しいプロジェクトを作成する

次のコマンドを実行して、新しいアプリケーションを作成します（フレームワークをデプロイします）：

 ng new my-app

このステップで我慢してください。 Angularはアプリケーションに必要なすべての依存関係をプルアップし、ほとんどの時間はnpmパッケージのインストールに費やされます。

2.4。ステップ3：開発モードでWebアプリケーションを開始する

プロジェクトディレクトリに移動し、Webサーバーを起動します。

 cd my-app ng serve --open

ng serveコマンドはWebサーバーを起動し、アプリケーションのソースディレクトリもリッスンし、これらのソースファイルに変更を加えて、その場でプロジェクトを再構築します。このモードでは、プロジェクトはディスクに保存されず、RAMに直接書き込まれることに注意してください。

--openキー（または単に-o）を使用すると、プロジェクトのビルド後にブラウザが自動的に開きます（オペレーティングシステムでデフォルトで選択されます）。

開いているタブhttp：// localhost：4200 /で、Angularアプリケーションの標準レイアウトを削除します。

2.5。ステップ4：最初の角度コンポーネントの編集

デフォルトでは、Angular CLIがベースコンポーネントを作成します。この基本コンポーネントはルートコンポーネントであり、app-rootセレクターに関連付けられています。ディレクトリ./src/app/app.component.tsの次のパスにあります。

このファイルには、次のものが表示されます。

 ... @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

@Componentは、Angularの基本的なデコレータの1つです。デコレータは、ECMAScript 2016標準でYehuda Katzによって提案された注釈（Javaの例）の代替であり、オブジェクトメタデータに注釈を付けるだけでなく、クラス、メソッド、およびプロパティを変更することもできます。装飾もプログラミング技術であり、

既存の関数を取り、その動作を変更/拡張します。多くの場合、デコレータを使用したコードは、よりきれいで、より美しく、より効率的です。

デコレータは関数（この場合はAppComponentクラス）を受け取り、メイン関数呼び出しの「魔法」を実行するラッパーを返します。ここで見ることができる@Componentデコレータの正確な機能は何ですか。

したがって、コンポーネントに対して今できる最も明白なことは、たとえば、タイトルを変更することです。

 ... export class AppComponent { title = 'My First Angular App'; }

ファイルに変更を加えて保存するとすぐに、ブラウザは自動的に変更をリロードします（ホットリロード）。もちろん、コンポーネントのスタイルを簡単に変更できます。

.src / app / app.component.cssファイルを開き、コンポーネントにいくつかのスタイルを指定します。

 h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; }

確かに、ここではすぐに次の点に注意する価値があります。

 body { background: red; } app-root { background: blue; }

その後、何も変更されず、ページの背景は赤にならず、コンポーネント自体の背景は青になりません。また、ページコードを見ると、次のように表示されます。

実際、AngularはデフォルトでCSSをカプセル化する（クロスブラウザはShadow DOMをエミュレートする）ため、あるコンポーネントのスタイルが別のコンポーネントのスタイルを壊したり再定義したりすることはありません。そのため、コンポーネントセレクタ名または外部セレクタ名を使用してスタイルを指定しないでください。 CSSコードをカプセル化するための属性は、このコンポーネントの子に対してのみ生成されます。

ページが膨大な数のコンポーネントを使用している場合、Angularは余分なジョブを実行してプロセッサにロードするため、速度に影響を与えると主張し、css方法論（BEM、SMACSS）を使用すると、おそらくこのためにAngularカプセル化を必要としない優れたレイアウトとCSSコード。これを行うには、デコレータで追加のパラメータを指定するだけです。

 @Component({ ... encapsulation: ViewEncapsulation.None ... })

詳細については、こちらをご覧ください。

2.6。次は？

上記の手順は、単純な「Hello、World」に必要なすべてです。その後、Tour of Heroesチュートリアルを勉強し、 Angularを使用してより複雑なアプリケーションを開発するために将来役立つ小さなアプリケーションを作成することができますが、 Udemyのビデオコースを見ることをお勧めしますそこにすべてが利用可能であることを示しています）。 angular-cliコマンドに慣れるには、このロシア語のリソースにアクセスしてください。これで、プロジェクトのカタログを見ることができます。

2.7。プロジェクトカタログ

Angular CLIは、エンタープライズソリューションを開発および展開するための便利なツールです。はじめに、勉強する必要がある最初のファイルはREADME.mdです。

これには、Angular CLIを使用するときに知っておくべき基本的なコマンドに関する情報が含まれています。 READMEの内容よりも多くを学び、Angular CLIの使用例をいくつか見る必要があるときはいつでも、公式リポジトリに移動してWikiセクションを開くだけです。

生成されたファイルの中には、なじみのないものもあるため、それらについて詳しく説明しましょう。

Srcディレクトリ

開発中のアプリケーションのソースコードは通常、srcディレクトリにあります。ここでは、Angularコンポーネント、テンプレート、スタイル、画像など、アプリケーションに必要なすべてのものを保存します。このフォルダ外のファイルは、アプリケーションの作成、アセンブリ、および展開をサポートすることを目的としています。

 . |-- app | |-- app.component.css | |-- app.component.html | |-- app.component.spec.ts | |-- app.component.ts | `-- app.module.ts |-- assets |-- environments | |-- environment.prod.ts | `-- environment.ts |-- favicon.ico |-- index.html |-- main.ts |-- polyfills.ts |-- styles.css |-- test.ts |-- tsconfig.app.json |-- tsconfig.spec.json `-- typings.d.ts

app / app.component。{ts、html、css、spec.ts} -htmlテンプレート、スタイル、単体テストでAppComponentコンポーネントを指定します。これは、アプリケーションの開発時にネストされたコンポーネントのツリーが表示されるルートコンポーネントです。

app / app.module.ts - AppModuleを指定します。アプリケーションの構築方法をAngularに伝えるルートモジュール。現在、AppComponentのみが宣言されています。その後、他のコンポーネントを宣言します。

asset / * -アプリケーションを作成するときに、イメージと最終アセンブリディレクトリにコピーする必要のあるすべてのものを配置するディレクトリ。

環境/ * -このディレクトリにはビルドターゲットファイル（devまたはprodモード）が含まれ、それぞれがアプリケーションでの使用に必要な単純なenv構成変数をエクスポートします。アプリケーションを開発すると、ファイルはその場で収集されます。開発中（dev）に異なるAPIセットを使用できます。本番（prod）とは異なり、あらゆる種類のメトリックまたは認証トークンを接続できます。さまざまなアセンブリ目的のために、さまざまなサービスまたはスタブを使用することもできます。

favicon.ico-ブラウザのタブに表示される独自のアイコンを追加できます。

index.htmlは、誰かがサイトにアクセスしたときに表示されるメインのHTMLページです。ほとんどの場合、編集する必要はありません。 Angular CLIは、アプリケーションの作成時に生成されたすべてのjsおよびcssファイルを自動的に追加するため、タグ（スクリプト、リンク）を手動で追加する必要はありません。

main.tsは、アプリケーションのエントリポイントです。これで、デフォルトで、アプリケーションはJITコンパイラーでコンパイルされます。このファイルは、アプリケーションのルートモジュール（AppModule）をロードし、ブラウザーで起動します。また、アセンブリからJITコンパイラーを除外してアプリケーションを事前にコンパイルすることにより、AOTコンパイラーを使用することもできます。このため、Angular CLI ng buildおよびng serveコマンドに-aotフラグを使用する必要があります。

polyfills.ts-さまざまなブラウザーは、特定のWeb標準をサポートするレベルが異なります。ポリフィルは、これらの違いを正規化するのに役立ちます。ただし、現在のブラウザのサポートを確認してください。

styles.css-グローバルスタイルはここに保存されます。ほとんどの場合、コンポーネントのローカルスタイルを使用しますが、アプリケーション全体に影響するスタイルはこの場所に配置する必要があります。

test.tsは、すべての単体テストへのエントリポイントです。このファイルにはカスタム構成がありますが、原則として編集することはほとんどありません。

tsconfig。{app | spec} .json -TypeScriptコンパイラの構成はtsconfig.app.jsonファイルに記述されています;単体テストでは、tsconfig.spec.json構成が使用されます。

プロジェクトのルートディレクトリ

src /は、プロジェクトルートディレクトリの要素の1つにすぎません。他のファイルは、アプリケーションの構築、テスト、保守、文書化、およびデプロイに役立ちます。

 . |-- README.md |-- e2e |-- karma.conf.js |-- node_modules |-- package-lock.json |-- package.json |-- protractor.conf.js |-- src |-- tsconfig.json `-- tslint.json

e2e / -e2e /ディレクトリ内にe2e（エンドツーエンド）テストがあります。これらのテストはメインアプリケーションをテストする別個のアプリケーションであるため、src /ディレクトリ内に配置しないでください。内部には、tsconfig.e2e.jsonなどの構成ファイルがあります。

node_modules /-Node.jsは、package.jsonにリストされているすべてのサードパーティモジュールを格納するこのディレクトリを作成します。

.angular-cli.json-角度CLI設定ファイル。このファイルでは、いくつかのデフォルト値を設定したり、プロジェクトのビルド時に含めるファイルを構成したりできます。

.editorconfig-コードテキストをフォーマットするための同じ基本構成を指定するエディターの簡単な調整。ほとんどのエディターは.editorconfigファイルをサポートしています。詳細については、 http：//editorconfig.orgを参照してください。

.gitignore-このファイルはバージョン管理システムに必要です。Gitリポジトリに保存する必要のない自動生成ファイルを除外する必要があります。

karma.conf.js -Karmaを使用して単体テストを実行するための構成ファイル。ngtestコマンドを使用してテストを実行できます。

package.jsonはnpm構成ファイルで、プロジェクトが使用する開発者のサードパーティモジュール（パッケージ）をリストします。ここで、独自のスクリプトを作成することもできます。

README.mdは、Angular CLI情報が事前に入力されたプロジェクトのメインドキュメントです。

tsconfig.json -IDEのTypeScriptコンパイラー構成。

tslint.json -ng lintの起動時に使用されるTSLint静的アナライザーの構成。アナライザーが必要なものについては、例をご覧ください。

開発者の経験

2.8。 Angular CLI vs. 手動設定

新しいAngularプロジェクトを作成する方法はたくさんあります。しかし実際には、2つの主なアプローチがあります。1つ目はAngular CLIを使用する方法で、2つ目はWebpackを手動で構成する方法です。

角度CLI

新しいAngularプロジェクトを作成する最も簡単で最速の方法。手動構成に頼ることなく、数分でプロジェクトを展開し、問題なく大きなアプリケーションの開発を開始できます。

長所：

すばやく簡単にインストールでき、初心者に最適
webpackのアドオンです
テストツールProtractor e2e、Karma、Jasmineが含まれます
依存関係を自分で監視する必要はありません
集中構成ファイル
アプリケーションを起動したり、新しいコンポーネントを作成したりするためのすばやく簡単なCLIコマンド

短所：

それほど高度ではない構成（Webpackの組み込み構成を変更することはできません）
構成ファイルの厳密な構造（ディレクトリからディレクトリへの移動がより困難ないくつかのtsconfigファイル）
弱いサポートまたはプラグインの完全な欠如（たとえば、Pugテンプレートを追加することは不可能です）

すべての長所と短所は次のようになります。c Angular CLIはプロジェクトの管理がはるかに簡単ですが、プロジェクトの柔軟性が低下します。これは初心者や単純なプロジェクトには最適ですが、将来的にはプロジェクトをカスタマイズするための手動のアプローチが必要になる可能性が高いでしょう。

Webpack

この場合、Webpackを使用した手動構成は、実際には、Angular CLIの長所と短所の反対です。ただし、構成の柔軟性の観点から、Angular CLIに代わる最良の選択肢の1つは、AngularClass Angular Webpack Starterプロジェクトです。ただし、webpackは簡単に構成できるため、プロジェクトにシンプルな環境をセットアップし、必要なものだけを残すことができます。

長所：

高度なWebpackセットアップ
HTMLテンプレートを使用する機能
クリーンな構成ファイルとディレクトリ構造
柔軟性の向上（構成ファイルは、独自のロジックを記述できるJavaScriptファイルです）

短所：

効果的なe2eテストのセットアップの難しさ
高度な構成機能により、構成エラーの可能性が高まります
依存関係とアップグレードの更新に関する問題

Systemjs

SystemJSは、ES6、AMD、CommonJSモジュール、グローバルブラウザーまたはNode.jsパッケージなど、ユニバーサルダイナミックモジュールローダーとしての地位を確立しています。 ES6と同様にTypeScriptでモジュールを使用するため、モジュールローダーが必要です（Webpackでは、ローダーがこれを担当します）。 SystemJSの場合、構成systemjs.config.jsを記述します。これにより、node_modulesディレクトリーまたはその他の場所で、モジュールの名前を対応するファイルにマップする方法を構成できます。

この構成ファイルは、クライアントでSystemJSを使用している場合に必要です。これを使用して、アプリケーションのメインモジュールをインポートします。

 <script> System.import('app').catch(function(err){ console.error(err); }); </script>

そして、先を見て、TypeScript構成に対して、モジュールタイプの特定のパラメーターを指定しました。

 { "compilerOptions": { "target": "es5", "module": "commonjs", // <------ ...

したがって、JavaScriptファイルでTypeScriptからコンパイルすると、内部に特別なrequire（）関数が表示されます。「モジュール」：「es6」を指定した場合、コンパイル済みファイルにキーワードimport、exportが表示されます。ただし、ブラウザの完全なサポートはまだないため、この構文はまだ使用できません。タイプ「モジュール」：「amd」を指定した場合、define（）関数を使用した別の構文が表示されます。 SystemJSが公式のTour of Heroes Webサイトのチュートリアルにまだ参加していることは注目に値しますが、Angular 5のリリース後、開発者はすぐにドキュメントを修正し、Angular CLIのサンプルに置き換えます。

モジュラービルドシステムの1つであるSystemJSは、ES6モジュールのサポートをエミュレートすることを目的としており、ブラウザーがそれらをサポートするとすぐにそれを簡単に取り除くことができますが、一般に、このベンチャーはSystemJSの欠点のために失敗しました。

Webpackはかなり柔軟なビルドシステムです。あらゆるタイプのモジュール（ES6、AMD、CommonJS）を処理するだけでなく、隣接タスクの実行、圧縮の提供、ファイルの縮小、画像の操作、CSSプリプロセッサーなどを可能にします。また、増分ビルドモードで開発するためのWebサーバーも提供します。 Webpackを使用すると、SystemJSは冗長になります。 Webpackは、bundle.jsという名前のファイルを少なくとも1つ準備します。このファイルには、Webコンポーネントに必要なすべてのHTML、CSS、JSコンポーネントが含まれている場合があります。すべてのファイルが1つのファイルに結合されるため、SystemJSなどのレイジーブートローダーの厳密な必要性はありません。 SystemJSの主な可能性は、ファイルの遅延読み込みでした。 1つの大きなバンドルをダウンロードしないため、アプリケーションのロードは高速になりますが、実際にはあまり有益なソリューションではないことが判明しました。

しかし、今でもWebpackではコード分割を使用し、オンデマンドの遅延読み込みを使用してそれらを読み込むことができます。また、モジュールの改善されたツリーシェーキングも導入されています。したがって、バージョン1.2以降、Angular CLIはWebpack実装を内部で使用します。

実際、SystemJSを使用して動作するスターターキットを見つけることはほとんど不可能であり、多くはWebpackにコピーしたか、Webpackを放棄しました。しかし、それを見つけたとしても、Angular 2のバージョンである可能性が高いでしょう。したがって、Angularアプリケーションを構築する最初の2つの方法を学ぶことを強くお勧めします。

ロールアップ

ここでは、このトピックについてはあまり説明しません。例がありますが（2番目のバージョンのWebpackと比較して）、どのコードがWebpackを生成し、出力でRollupを生成します。ここでは後者の方がはるかに優れています。 Webpackは単なるモジュールビルダーではなく、はるかに多くの機能を備えています。したがって、一般にWebpackはアプリケーション開発に適し、Rollupは一般にライブラリ開発に適しています。

3. Angular 5のイノベーション

すでに2番目のバージョンから4番目のバージョンにアップグレードできた人は、それがいかに簡単であるかに気づかずにはいられませんでした。 5番目のバージョンでは、Angular 4からAngular 5への移行が可能な限りシームレスに行われるように、この快適な伝統を継続し、すべてを実行したいと考えています。将来的には、Angular CLIに自動更新システムが実装される予定です。次に、Angular CLI 1.5+を使用するか、プロジェクト内のパッケージを自分で更新する必要があります。

 $ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0 #  Yarn: $ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0 #   @5.0.0,    @latest

3.1。改善されたコンパイラ

TypeScript変換

角度4：

インクリメンタルビルドでは、Angular Compiler（ngc）がすべてのファイルを変更ごとに再コンパイルするため、開発プロセスが遅くなりました。

角度5：

必要なものだけを再コンパイルする改善された監視オプションが導入されました。

これは、中規模のプロジェクトでは、コンパイル時間が12〜14秒から2〜3秒に短縮されたことを意味します。

これで、AOTコンパイルとインクリメンタルビルドモードを使用できるようになりました。これにより、開発段階でアプリケーションコードの問題領域を見つけることができます。誰もが遭遇した最も一般的な間違いは、異なるビルドモードでレイジーモジュールを操作することです。 AngularJSおよびAngular 2では（当初）、JITコンパイルのみでしたが、将来、新しいタイプのコンパイルが追加されました。古いバージョンのAngular AOTモードではデフォルトで有効になります。これに特別なフラグ（Angular CLI）を指定するか、 webpackには特別なローダーを使用します。

 ng serve --aot

ただし、アプリケーションをJITモードでのみビルドしていた場合、何か問題が発生する可能性があります。

 ng build --prod --aot=false --build-optimizer=false # : ng build --prod --aot=false

Angularは2つのモードで動作することを既に理解しているかもしれません。主なポイントは次のとおりです。

コンポーネントテンプレートは実行時にコンパイルされます（ジャストインタイム、JIT）

コンポーネントテンプレートは、実行前にコンパイルされます（事前、AOT）

ここで見ることができるJITとAOTの違いは何ですか。

Angular CLI 1.5のリリースにより、開発の難易度が低くなり、アプリケーションを構築するモードを心配する必要がなくなり、間違ったモードで何かを組み合わせた場合に結果が生じます。これで、いつでもAOTを使用できます。

空白を保持

@Component , .

, app.component.html:

, , . , .

preserveWhitespaces, true. , .

tsconfig.json

 { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [] }, "angularCompilerOptions": { "preserveWhitespaces": false // <------ }, "exclude": [ "test.ts", "**/*.spec.ts" ] }

main.ts

 platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: false });

pre, , . Angular preserveWhitespaces true. — , - , .

ngPreserveWhitespaces, - , :

 <div ngPreserveWhitespaces>hi !+! panda</div>

Angular , , d.ts API. , runtime.

 export function webSocketFactory() { return WebSocket; } @NgModule({ providers: [ { provide: WEBSOCKET, useFactory: webSocketFactory }, ] }) export class AppModule {}

今：

 @NgModule({ providers: [ { provide: WEBSOCKET, useFactory: () => WebSocket }, ] }) export class AppModule {}

, . .

fullTemplateTypeCheck, false, . , , :

 <!-- lowercase expects a string --> <div>{{ 12.3 | lowercase }}</div>

 Argument of type '12.3' is not assignable to parameter of type 'string'

, . , ngModel hasError(), :

 <input [(ngModel)]="user.password" required #loginCtrl="ngModel"> <!-- typo in `hasError()` method --> <div *ngIf="loginCtrl.hasEror('required')">Password required</div>

 Property 'hasEror' does not exist on type 'NgModel'. Did you mean 'hasError'?

3.2。

Angular 5.0.0, production builds, Angular CLI, .

Build optimizer — , Angular CLI, , .

AngularMoscow 2017 Google Angular 4 , , Angular 2 Angular 4. , , , Angular 5. , , , Angular 5 .

3.3。 server-side rendering Angular Universal

Angular Universal — , (SSR) Angular-. HTML , .

SSR Enterprise-:

Nodemon ( Express Node.js), server-side-rendering ( headless , ), , . - Node.js - (Java, ASP.NET, ...) (Nginx, HAProxy). - , - Node.js. - , , , - , , .

, , , , , .

starter kit, . . Angular Universal Page Load Performance .

Angular Universal State Transfer API and DOM Support

. ServerTransferStateModule BrowserTransferStateModule. HTTP- . — Domino platform-server. DOM , -- JS- .

3.4。

, Enterpise User Interface , , UI . blur submit, . , . asyncValidator options.

Angular 4:

Anguar 5:

updateOn:

ngModel:

ngFormOptions:

3.5。 Pipes

Pipes () Date, Number, Percent Currency, i18n.

Pipes . . , .

3.6。 ReflectiveInjector StaticInjector

ReflectiveInjector StaticInjector. injector' Reflect. , Reflect - , JIT.

Dependency Injection Angular, . Dependency Injection (DI) — , . DI — , , (), (), . () .

ReflectiveInjector

ReflectiveInjector , Reflect, , Reflective.

 class B {} class A { constructor(@Inject(B) b) { } <----- `B`   } const i = ReflectiveInjector.resolveAndCreate([A, B]);

@Inject , , ReflectiveInjector .

StaticInjector

, :

 class B {} class A { constructor(b) {} } const i = Injector.create([{provide: A, useClass: A, deps: [B]]}; const a = i.get(A);

, :

 class B1 {} class A1 { constructor(@Inject(B1) b) {} } class B2 {} class A2 { constructor(@Inject(B2) b) {} } bootstrapModule(AppModule, {providers: [A1, B1]}).platformBrowserDynamic([A2, B2])

 class B1 {} class A1 { constructor(b) {} } class B2 {} class A2 { constructor(b) {} } platformBrowserDynamic([{ provide: A1, useClass: A1, deps: [B1] }, B1]) .bootstrapModule(AppModule, { providers: [ {provide: A2, useClass: A2, deps: [B2]}, B2 ] })

ReflectiveInjector - , , , . , .

3.7。 NgZone

Angular NgZone . , , , , , Mobx .

 platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then(ref => {});

3.8。 Multi exportAs

. - .

 @Component({ moduleId: module.id, selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button]', exportAs: 'matButton, matAnchor', . . . }

3.9。 RxJS

RxJS 5.5.2+. «lettable operators» , . patch, splitting / tree shaking.

 import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/do'; @Component({ ... }) export class AppComponent implements OnInit { myObs = Observable.of('Hello', 'Alligator', 'World!'); ngOnInit() { this.myObs .do(x => console.log('The do operator is the do operator!')) .filter(x => x.length > 8) .map(x => x.toUpperCase()) .subscribe(x => console.log(x)); } }

今：

 import { Component, OnInit } from '@angular/core'; import { of } from 'rxjs/observable/of'; import { map, filter, tap } from 'rxjs/operators'; @Component({ ... }) export class AppComponent implements OnInit { myObs = of('Hello', 'Alligator', 'World!'); ngOnInit() { this.myObs .pipe( tap(x => console.log('The do operator is now tap!')), filter(x => x.length > 8), map(x => x.toUpperCase()) ) .subscribe(x => console.log(x)); } }

, . lettable- pipe, .

:

do -> tap

catch -> catchError

switch -> switchAll

finally -> finalize

詳細はこちら。

3.10。 Router

. guards / resolvers .

():

GuardsCheckStart,

ChildActivationStart,

ActivationStart,

GuardsCheckEnd,

ResolveStart,

ResolveEnd,

ActivationEnd,

ChildActivationEnd.

 class MyComponent { constructor(public router: Router, spinner: Spinner) { router.events.subscribe(e => { if (e instanceof ChildActivationStart) { spinner.start(e.route); } else if (e instanceof ChildActivationEnd) { spinner.end(e.route); } }); } }

3.11。 Mobile Experience

@angular/service-worker, Progressive Web Application (PWA). - Material Design 2017 . , .

3.12。 Breaking Changes

, . , Angular Angular Update Guide , , - .

Pipes

Pipes: Date, Number, Percent Currency, :

 @NgModule({ imports: [CommonModule, DeprecatedI18NPipesModule], // ... }) export class AppModule {

代わりに：

 platformBrowserDynamic([ MyCustomProviderA, MyCustomProviderB // depends on MyCustomProviderA ]).bootstrapModule(AppModule);

 platformBrowserDynamic([ { provide: MyCustomProviderA, deps: [] }, { provide: MyCustomProviderB, deps: [MyCustomProviderA] } ]).bootstrapModule(AppModule);

HttpClient

Angular 4.3, HttpClient. Angular 6, , Angular deprecated.

HttpClientModule:

Inject HttpClient:

JSON:

(Interceptors):

Resource integrity

Angular CLI 1.5 script link integrity crossorigin. , , , «man in the middle». , .

TypeScript

Angular CLI 1.5 , TypeScript ( TypeScript ), Angular. , , - , TypeScript - , , . Angular CLI TypeScript 2.4. , ng set warnings.typescriptMismatch=false (, , ).

appRoot configurable

— src.

結論として

Angular , . , Angular. , Issues Tracker , , , Angular Team, Community. , , ! さようなら！

角度5