Angular Info

Angular 2.1.2/2.2.0-beta.1のリリース

Fri, 28 Oct 2016 13:53:56 +0900

どうも、らこです。今週も予定通り新しいバージョンのリリースが行われました。現在リリースされているバージョンは以下のとおりです

	latest	next
core	2.1.2	2.2.0-beta.1
router	3.1.2	3.2.0-beta.1

それでは今回の注目すべき変更点をまとめます。

2.1.2

Bug Fixes

compiler: walk third party modules (#12453) (a838aba), closes #11889 #12428

サードパーティライブラリが提供するDirectiveを使ったときに、AoTコンパイルで生成されるコードが正しくないimport文を含むバグが修正されました

compiler: use Maps instead of objects in selector implementation (d321b0e)

ComponentやDirectiveのselectorとクラスのマッピングに使っていたオブジェクトを、Mapに置き換えました。
今までは単なるObjectのインスタンスだったので、一部の文字列(constructorなど)は特別な意味をもってしまい、selectorとして使えませんでした。

compiler-cli: assert that all pipes and directives are declared by a module (7221632)

ngcコンパイラが、NgModuleのdeclarationsに含まれていないPipeやDirectiveが見つかったときにも警告を出すようになりました。

http: overwrite already set xsrf header (b4265e0)

リクエストの際に明示的にX-XSRF-TOKENヘッダを設定してある場合はhttpパッケージによって自動的に付与されているものを上書きするように修正されました

router: canDeactivate guards are not triggered for componentless routes (b741853), closes #12375

router: change router not to deactivate aux routes when navigating from a componentless routes (52a853e)

Componentを持たないルートについて、deactivateに関するバグが修正されました。

router: disallow component routes with named outlets (8f2fa0f), closes #11208 #11082

Componentを持たないルートがRouterOutletの名前を指定したときにエラーを出すようになりました。

router: preserve resolve data (6ccbfd4), closes #12306

一度resolveされた値を、ActivatedRouteが保存するようになりました。

その他

ngcによって生成されるngfactoryファイルのサイズを小さくする最適化が行われています。

2.2.0-beta.1

Code Refactoring

upgrade: re-export the new static upgrade APIs on new entry (a26dd28)

upgradeパッケージのAPIをimportするパスが変更されました。

downgradeComponent
downgradeInjectable
UpgradeComponent
UpgradeModule

以上のAPIは @angular/upgrade/static からexportされるようになります。

Features

router: export routerLinkActive w/ isActive property (c9f58cf)

RouterLinkActive ディレクティブが routerLinkActive としてテンプレート中でexportされます。
次のようにrouterLinkActiveディレクティブをテンプレート変数として取り出し、isActiveプロパティにアクセスできます。

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
    Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

今週は追加でいくつか。

記事紹介

Handling Service Configuration Without A Configuration Phase In Angular 2.1.1

Angular 2.1系における、Serviceのデザインパターンです。multi: trueなproviderを使って柔軟な設定を行うサービスを作る方法を紹介しています。
Dependency Injectionの有効な活用法なので参考にすると良いでしょう

Reactive FormGroup validation with AbstractControl in Angular 2

最近リニューアルしたTodd Motto氏のブログの新しい記事です。ReactiveFormsのFormGroupに対してカスタムバリデーターを作成、適用する方法を解説しています

その他

Angular-CLIの1.0.0-beta.19-3がリリースされました
Universalプロジェクトのコアであるplatform-nodeモジュールがAngularの本体に吸収されることになりました
上記と関連して、Core TeamのメンバーによるUniversalへのコントリビューションが増えるとのことです

今週も順調にリリースが進んでいます。また、Universalの開発をCore Teamが加速させるのはとても期待できますね。完成が楽しみです

それではまた来週のリリースで。

Angular 2.1.1/2.2.0-beta.0のリリース

Sat, 22 Oct 2016 14:09:43 +0900

どうも、らこです。今週も予定通り新しいバージョンのリリースが行われました。現在リリースされているバージョンは以下のとおりです

	latest	next
core	2.1.1	2.2.0-beta.0
router	3.1.1	3.2.0-beta.0

それでは今回の注目すべき変更点をまとめます。

2.1.1

Bug Fixes

compiler: generate aot code for animation trigger output events (#12291) (6e5f8b5), closes #11707

アニメーションのトランジションイベントのハンドリングを含むテンプレートがAoTコンパイルできなかったバグが修正されました

router: correctly export filter operator in es5 (#12286) (27d7677)

router.umd.jsにRxJSのfilterオペレーターが含まれておらず、routerパッケージ単体で読み込んだときにエラーになっているのが修正されました

router: do not update primary route if only secondary outlet is given (#11797) (da5fc69)

名前付きrouter-outletだけを更新する遷移のときに、デフォルトのrouter-outletを更新しないように修正されました

router: fix lazy loading triggered by redirects from wildcard routes (5ae6915), closes #12183

ワイルドカードルート ** からリダイレクトした先のルートがLazy Loadingを使っていると正しくルーティングされないバグが修正されました

2.2.0-beta.0

Features

common: support narrow forms for month and weekdays in DatePipe (#12297) (f77ab6a), closes #12294

dateパイプのフォーマットに新しく1文字形式(Narrow form)での月と曜日の表現が追加されました

Component	Symbol	Narrow	Short Form	Long Form	Numeric	2-digit
month	M	L (S)	MMM (Sep)	MMMM (September)	M (9)	MM (09)
weekday	E	E (S)	EEE (Sun)	EEEE (Sunday)	-	-

forms: add hasError and getError to AbstractControlDirective (#11985) (592f40a), closes #7255

フォームのコントロールに hasError メソッドと getError メソッドが追加されました

<label>Username</label><input name="username" ngModel required #username="ngModel">
<div *ngIf="username.dirty && username.hasError('required')">Username is required</div>

forms: add ng-pending CSS class during async validation (#11243) (97bc971), closes #10336

非同期バリデーターによるバリデーション中にng-pendingクラスがセットされます

forms: Added emitEvent to AbstractControl methods (#11949) (b9fc090)

フォームのコントロールが持つメソッドに、 emitEvent オプションが追加されます。
emitEventがfalseのとき、そのメソッドによる操作はvalueChangeイベントやstatusChangeイベントを発火しません。

control.setValue('foo', {emitEvent: false});

forms: make ‘parent’ a public property of ‘AbstractControl’ (#11855) (445e592)

フォームのコントロールにparentプロパティが追加され、入れ子になったコントロールから親のコントロールグループを取得できるようになります

forms: Validator.pattern accepts a RegExp (#12323) (bf60418)

Validator.patternバリデーターがRegexp型のパターンを受け付けるようになります

upgrade: add support for AoT compiled upgrade applications (d6791ff), closes #12239

@angular/upgradeパッケージを使ったアプリケーションがAoTコンパイル可能になります。

router: add support for ng1/ng2 migration (#12160) (8b9ab44)

@anguar/upgradeを使ってAngular 1と2を共存させるアプリケーションにおいて、部分的にAngular 2のrouterを使用できるようにする機能が追加されます。
この新しい機能については、Victor Savkin氏が自身のブログで自ら記事を書いています。
Migrating Angular 1 Applications to Angular 2 in 5 Simple Steps
Angular 2のrouterを有効にする条件を、UrlHandlingStrategyという仕組みで制御できるようになります。

2.2系に含まれるフォーム関連の機能はとても便利そうです。Angular 1からのマイグレーション関連の変更も特徴的です。とはいえまだbeta.0ですので、緊急でなければ3週間後の2.2.0リリースを待ちましょう。

それではまた来週のリリースで。

Angular 2.1.0のリリース

Sun, 16 Oct 2016 19:39:11 +0900

こんにちは、らこです。Angular 2.1.0がリリースされました。正式リリース後はじめてのマイナーアップデートです。
マイナーアップデートまでにはベータリリースと、RCリリースを挟んでいるので、ここでは2.0.1からの重要な変更点をまとめて紹介します。

2.0.2

Bug Fixes

compiler: do not embed templateUrl in view factories in non-debug mode. (#11818) (51e1994), closes #11117

angularCompilerOptions の debug がtrueに設定されていないときはコンパイル後のngfactoryファイルに templateUrl が残らなくなりました

compiler: fix :host(tag) and :host-context(tag) (a6bb84e0), closes #11972
compiler: fix attribute selectors in :host and :host-context (#12056) (6f7ed32), closes #11917
compiler: support @page and @document CSS rules (#11878) (c99ef49), closes #11860
compiler: support [attr="value with space"] (bd012ef), closes #6249
compiler: support quoted attribute values (7395400), closes #6085

コンポーネントのスタイルに関するバグ修正がいくつか入っています。
また、コンポーネントのスタイル中で @page と @document が使えるようになりました

forms: properly validate empty strings with patterns (#11450) (e00de0c)

patternバリデーターで空文字列を許可しない正規表現だった場合に空文字列がinvalidになっていなかったバグが修正されました。

it('should error on failure to match empty string', () => {
    expect(Validators.pattern('[a-zA-Z]+')(new FormControl(''))).toEqual({
         'pattern': {'requiredPattern': '^[a-zA-Z]+$', 'actualValue': ''}
    });
});

http: remove url params if provided value is null or undefined (#11990) (9cc0a4e)

UrlSearchParamsクラスのsetメソッドや.appendメソッドで、値がnullあるいはundefinedだった時のふるまいが変わりました。

set: 与えられたキーのパラメータを削除
append: 何もしない

あっさりバグフィックスとして変更されてますが、地味に大きな変更なのでクエリパラメータの組み立てしている部分を見直したほうがいいかもしれません。

2.1.0-beta.0

Features

router: add router preloader to optimistically preload routes (5a84982)

routerパッケージにPreloading機能が実装されました。Preloadingについては[前回の記事]()で軽く紹介しています。
また、Victor Savkin氏のブログでも詳しく解説されています。

https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb

2.1.0-rc.0

Features

animations: provide aliases for :enter and :leave transitions (#11991) (e884f48)

Animation DSLに :enterエイリアスと:leaveエイリアスが実装されました。それぞれvoid => *と* => voidに対応したエイリアスです。

2.1.0 incremental-metamorphosis

Bug Fixes

compiler: validate [@HostBinding](https://github.com/HostBinding) name (#12139) (13ecc14)

@HostBindingに渡されるバインド対象のプロパティ名にバリデーションが入ります。@HostBindingに[prop]や(event)のような記号付きのターゲットが指定できなくなりました。

compiler-cli: remove peerDependency on @angular/platform-server (#12122) (71b7654)

compiler-cliパッケージのpeerDependenciesからplatform-serverパッケージの記述が消えました。

forms: allow optional fields with pattern and minlength validators (#12147) (d22eeb7)
forms: properly validate blank strings with minlength (#12091) (f50c1da)

minlengthバリデーターの挙動が修正され、空文字列をinvalidとしなくなりました。空文字列を検出するためにはrequiredバリデーターと併用します。

http: fix Headers initialization from Headers and Object (#12106) (f4566f8)
platform-browser-dynamic: mark platformBrowserDynamic as stable API (#12154) (bcef5ef)

platform-browser-dynamicパッケージのplatformBrowserDynamic()関数に_stable_ラベルが付けられました。

router: parent resolve should complete before merging resolved data (1681e4f), closes #12032

入れ子になったルートへのナビゲーション時に、親のResolveを待ってから子の遷移が行われるようになりました。

記事紹介

The Angular 2 revolution is here by Gerard Sans

gerardsans氏によるAngular 2の紹介スライドです。最新の内容を踏まえてわかりやすくまとめられているので見てみるとよいでしょう。

Angular Router: Understanding Redirects

毎度のVictor Savkin氏のブログです。routerパッケージのリダイレクトのテクニックがまとめられています。

Versioning and Releasing Angular

Angular公式ブログより、今後のバージョニングとリリースに関する記事です。必読です。

Ahead-of-Time Compilation - ts

angular.ioにAoTコンパイルのクックブックが追加されました

Resolving route data in Angular 2 by thoughtram

thoughtramブログより、routerパッケージのResolve機能に関する記事です

Two-way Data Binding in Angular 2 by thoughtram

thoughtramブログよりもうひとつ。Angular 2の双方向データバインディングについてまとめられた記事です。

公式ブログにも書かれているように、今後は毎週新しいバージョンのリリースが続けられます。とはいえベータリリースすべてに追従する必要はないので、おちついて4週間ごとのマイナーアップデートに対応していけばよいでしょう。
それではまた次回のリリースで。

Angular 2.0.1/2.1.0-beta.0のリリース

Sat, 24 Sep 2016 06:29:45 +0900

どうも、らこです。Angular 2.0.0の公開から初めてのアップデートがリリースされました。
今回はバグ修正だけを取り込んだ2.0.1と、新しい機能を追加した2.1.0-beta.0の同時リリースです。2.0.0リリース時の宣言通り、semverに従ったバージョニングになっています。
それでは今回の変更点をピックアップしていきます。

2.0.1
2.1.0-beta.0

ベータ版のインストール方法

今回より、npmのリリースタグを用いて安定版とベータ版を同時リリースしています。npm info @angular/core コマンドを実行すればわかりますが、latestバージョンが2.0.1、nextバージョンが2.1.0-beta.0になっています。
何もバージョンを指定せずにnpmでインストールするとlatestタグが使われます。2.1.0-beta.0をインストールする場合は、 npm install @angular/core@next というふうにタグを付けましょう。

2.0.1の修正点

common: fix ngOnChanges signature of NgTemplateOutlet directive (14ee759)

NgTemplateOutletクラスのngOnChangesメソッドが正しく宣言されていなかった問題が修正されました。
AoTコンパイル時にNgTemplateOutletを使うとエラーが発生していたのが解決されます。

compiler: [attribute~=value] selector (#11696) (734b8b8), closes #9644

[attribute~=value]形式のセレクターを使ったCSSが、正しくShadow CSS化されない問題が修正されました。

compiler: safe property access expressions work in event bindings (#11724) (a95d652)

(click)="foo?.bar()" というふうに、イベントバインディングの文の中で ?. シンタックスが使えるようになりました。

compiler: throw when Component.moduleId is not a string (bd4045b), closes #11590

Component.moduleIdについて、実行時に文字列型かどうかのチェックを行うようになりました。

compiler: do not provide I18N values when they’re not specified (03aedbe), closes #11643

AoTコンパイル時に、常に--localeオプションが求められていた不具合が修正されました。

core: ContentChild descendants should be queried by default (0dc15eb), closes #1645

ContentChildが、直下の要素だけでなくその子孫までクエリするのをデフォルトの動作としました。
次のような場合に、<some-component> は #foo で参照される要素をクエリするようになります。

<some-component>
    <div>
        <div #q></div>
    </div>
</some-component>

forms: disable all radios with disable() (2860418)

ラジオボタンのコントロールに対してdisableメソッドを呼び出したときに、グループ内のすべてのラジオボタンを無効にするよう修正されました。

forms: make setDisabledState optional for reactive form directives (#11731) (51d73d3), closes #11719

ControlValueAccessor#setDisabledStateメソッドがオプショナルにもかかわらず常に呼び出されていた部分が修正されました。

forms: support unbound disabled in ngModel (#11736) (39e251e)

ngModelディレクティブのdisabledプロパティを使いやすくする修正が行われました。

upgrade: allow attribute selectors for components in ng2 which are not part of upgrade (#11808) (b81e2e7), closes #11280

UpgradeAdapterを使った際に、Angular 2側のテンプレートでは属性セレクタのコンポーネントを使用できるようになりました。

2.1.0-beta.0の変更点

Features

router: add router preloader to optimistically preload routes (5a84982)

routerパッケージに、Preloadingという仕組みが導入されます。これはrouterのLazyLoading機能によってAngularモジュールの遅延読み込みを行うとき、モジュールの読み込みのタイミングを制御するためのものです。
Preloadingの処理はPreloadingStrategyという設定によって制御され、デフォルトでは全くPreloadingを行わないNoPreloadingが設定されています。
ビルトインのPreloadingStrategyは、NoPreloadingの他にもうひとつPreloadAllModulesがあり、こちらは逆にすべての子モジュールを即座に読み込む設定です。
Preloadingは、canLoadが設定されているルートとその子孫には適用されません。

PreloadingStrategyの設定は、RouterModule.forRootメソッドの第二引数オプションに次のように渡します。

RouteModule.forRoot(ROUTES, {preloadingStrategy: PreloadAllModules})

Bug Fixes

router: update the router not to reset router state when updating root component (#11799) (31dce72)

routerパッケージの次期バージョン 4.0.0に向けた内部の修正です

記事・動画紹介

The Powerful URL Matching Engine of Angular Router

Victor Savkin氏がRouterのURLルーティングの規則や機能などを詳しく解説しています。

Angular 2 Animations - Foundation Concepts

安定と信頼のthoughtram blogです。Angular 2のアニメーションAPIについて概要の解説をしています。

Webinar: using new ngModule in Angular 2 w/ Pascal Precht (LIVE)

Pascal Precht氏によるNgModule機能のwebinarです。とてもわかりやすく重要なポイントを解説しているので必見です。

今回はこのあたりで。それではまた。

🎉✨ Angular 2.0.0がリリースされました 🎉✨

Fri, 16 Sep 2016 00:36:17 +0900

どうも、らこです。

ついにAngular 2.0.0が正式リリースされました！めでたい！！
今回はRC.7も含めた変更点の解説に加えて、正式リリース後のAngularの予定についても紹介します。

RC.6からの変更点

RC.7、2.0.0ともに、ほとんどがバグ修正とドキュメンテーションの追加で、破壊的な変更はRC.7にひとつあるだけです。

2.0.0-RC.7
2.0.0

破壊的変更

...Metadata系のクラスを廃止
refactor(core): remove `…Metadata` for all decorators and use the dec… · angular/angular@63e15ff

RC.6までは、@Componentデコレーターに渡すオブジェクトの型はComponentMetadataというクラスになっていて、
Component以外にもそれぞれのデコレーターに対応した...Metadataクラスが存在しました。

RC.7で...Metadataクラスはそのデコレーターと同じ名前のインターフェースに統一されました。

Before: new ComponentMetadata(…)
After: new Component(…)

依存パッケージの更新

2.0.0時点で、依存パッケージはそれぞれ次のバージョンに更新されました

zone.js@0.6.21
rxjs@5.0.0-beta.12

修正されたバグ(抜粋)

ShadowCSSのパフォーマンスリグレッションを修正
fix(ShadowCss): fix perf regression (#11420) · angular/angular@78ad9ad

RC.6リリースによって起きていた、ShadowCSSの重大なパフォーマンス問題を修正しています。

実装漏れのHTML5標準要素をスキーマに追加
fix(DomSchema): add missing elements · angular/angular@d309f77

<time>要素や<summary>要素など、HTML5仕様に含まれているがAngularが認識できていなかった要素をスキーマに取り入れました。

TitleサービスがBrowserModuleから提供されていなかったのを修正
fix(platform-browser): provide Title service as part of the module (#… · angular/angular@85d9db6

platform-browserから提供されている、ウィンドウのタイトルを操作するためのTitleサービスが、BrowserModuleに含まれていなかったのを修正しています。

Angularの今後

さて、2.0.0正式リリースを迎えたAngularの、今後の動きについて紹介していきます。
正式リリースが発表されたイベントでの発言からいくつかポイントを抜粋しています。

Angular Special Event - YouTube

Semantic Versioningの導入

Angular 2.0.0から、Semantic Versioningに従ってバージョンを付与するようになりました。
また、最低6ヶ月間は破壊的変更を含めず、メジャーバージョンを維持することを宣言しています。
つまり、最短で2017年の2月ごろに、Angularはバージョン3.0.0を迎えるということです。

これまでと全く違うバージョニングに戸惑う方も多いと思いますが、
Angular 1から2のような断絶を避けるために、今後は後方互換性を保ったまま緩やかにアップデートを続けていきます。
Angular 2の正式版に至るまでと同じように、将来的に廃止される予定のAPIは非推奨なAPIにして、
段階的にマイグレーションが可能になるようなアップデートを予定しています。

新しいバージョニングに合わせて、AngularJSやAngular2といった呼称はすべて、Angularに統一されることになります。
現在のバージョン2のことは、Angular 2.0や、Angular v2という風に呼ぶことになります。

Angular 2の今後

Angular 2としてこれから取り組む項目は次のとおりです。

多くのバグ修正と、破壊的でない機能追加
ドキュメンテーションの拡充
アニメーションAPIの拡充
Angular Material 2の拡充
Web Worker向けAPIの安定化
Angular Universalの拡充と、対応言語の拡張
高速化と軽量化

今後数ヶ月間、Angularチームはこれらを中心に取り組んでいきます。

Angular 1のサポートについて

Angular 1のサポートは、今後も長い間続けられます。
ひとつの指標として、Angular 2がAngular 1よりもメジャーになるまでは、Angular 1をしっかりサポートすると言っています。
現在Angular 1のユーザーは約130万人、それに対してAngular 2のユーザーは48万人程度です。
これが逆転するまでは、ひとまずAngular 1はこれまでどおりメンテナンスされ続けるでしょう。

そして、シェアの逆転が起きたところで、それはすぐにAngular 1が終わりになるわけではなく、
その後もしばらくはコアチームによってアップデートが続けられる予定です。

AoTについて

今後Angularは、デフォルトでAoTを用いるようにする予定です。
現在はcompiler-cliを使ってコンパイルしていますが、近いうちにWebpackだけで解決できるような仕組みを提供する予定があると話しています。

AngularCLIについて

AngularCLIはついにデフォルトでWebpackを使うようになり、使いやすさが格段にあがりました。
今後はコアチームのメンバーも積極的にコントリビュートして、AngularCLIをより便利にしていく予定です。
スキャフォールディングのカスタマイズ機能についても前向きに検討しているとのことです。

以上、RC.6からの変更点と、Angular 2.0の今後についてのまとめでした。
いきなりではありましたが、何はともあれ嬉しいニュースです。
いままで正式リリースじゃないという理由で迷っていた方も、ぜひ秋の夜長にAngular 2に入門してみてください。

それではまた。

Angular 2 RC.6がリリースされました

Thu, 01 Sep 2016 21:23:17 +0900

どうも、らこです。Angular 2のRC.6がリリースされました。
RC.6はFinalリリースへの最後の一歩です。
非推奨だったAPIがきれいに削除され、RC.5で導入されたNgModuleを基本としたAPIに整えられました。
RC.5でAngularモジュール(NgModule)対応が済んでいないと、RC.6にアップデートできません。
まずはRC.5で準備を整えてから、最終リリースへの階段を登りましょう。

それでは今回の重要な変更点をピックアップしていきます。

2.0.0-RC.6

破壊的変更

まずはRC.6の破壊的変更から。破壊的変更とはいいますが、ほとんどはRC.5時点で非推奨となったAPIの完全な削除です。

npmパッケージの構成の変更

RC.6から、npmパッケージとして配布されるAngular 2のソースコードは、 ESM (ES6 Modules)形式のJavaScriptになりました。
これはRollupや、Webpack2などの、Tree Shakingに対応したbundlerのための変更です。
これまでどおりCommonJS形式でAngular 2を読み込む場合は、 bundles/*.umd.js にあるUMD形式のファイルを使う必要があります。
ただし、ほとんどの場合はpackage.jsonのmainプロパティによって自動的にそちらに誘導されるので、特に設定を変える必要はありません。

SystemJSに関しては、こちらの設定を参考にするとよいでしょう。

zone.jsのアップデートにともなうtestingへの影響

依存するzone.jsのバージョンが上がったことにともない、ユニットテスト環境でのzone.jsの読み込みに変更があります。
詳細はこちらを参考にしてください。

なお、今回の変更により Jasmine 以外のテスティングフレームワークを使おうとするとエラーが発生する問題が起きています。

RC6 unit tests with mocha fail to run · Issue #11230 · angular/angular

mochaなどのフレームワークを使っている場合は、今のところはRC.6へのアップデートは避けたほうがよいでしょう。
上記Issueをウォッチしておくことをおすすめします。

`SanitizationService`/`DomSanitizationService`の改名

上記APIはそれぞれ、 Sanitizer/DomSanitizerに名前が変更されました。
名前以外の変更はありません。

`@Component.directives/pipes`の完全廃止

@Componentデコレーターが受け取るメタデータについて、
directivesプロパティと、pipesプロパティが完全に削除されました。
RC.5で導入された@NgModuleデコレーターのdeclarationsを使用してください。

また、この変更にともなって、Component単位でのコンパイルも廃止されています。
具体的には以下のAPIが廃止されています

DynamicComponentLoader
ComponentResolver
Compiler.compileComponentAsync/Sync
SystemJsComponentResolver/SystemJsCmpFactoryResolver

動的なコンポーネント作成の際は、ComponentFactoryResolverから該当のコンポーネントのComponentFactoryを取得してください。

アニメーション定義の非推奨なテンプレートシンタックスを廃止

RC.5で追加された新しいシンタックスに移行し、古いシンタックスは廃止されます。

<!-- this is now invalid -->
<div @flip="flipState"></div>

<!-- change that to -->
<div [@flip]="flipState"></div>

@プレフィックスではなくanimate-プレフィックスを使う場合も同様で、bind-プレフィックスが必須になります。

<!-- this is now invalid -->
<div animate-flip="flipState"></div>

<!-- is valid now -->
<div bind-animate-flip="flipState"></div>

非推奨なプロバイダー宣言を廃止

これまで非推奨だったプロバイダーの宣言方法が廃止され、ひとつの書き方に統一されます。

// NG
bind(MyClass).toFactory(...)
new Provider(MyClass, toFactory: ...)

// OK
{provider: MyClass, toFactory: ...}

`NgZoneError`の廃止

非推奨にされていたNgZoneErrorが削除されました。

非推奨なboostrap APIの廃止

coreBootstrapとcoreLoadAndBootstrapが廃止されました

`ApplicationRef`,`PlatformRef`の非推奨APIの廃止

ApplicationRefとPlatformRef関連のAPIで非推奨なものがすべて廃止されました

非推奨な`@Directive.properties/events`の廃止

非推奨なAPIだった@Directiveや@Componentデコレーターのpropertiesプロパティとeventsプロパティが廃止されました。
これらはinputsとoutputsを使用します。

`Query`/`ViewQuery`の廃止

非推奨でした(略)

`TestComponentBuilder`の廃止

RC.5でTestBedになりました。

`#`シンタックスと`var-`シンタックスの廃止

非推奨でした。ローカル変数宣言にはlet-を使います

`HTTP_PROVIDERS`と`JSONP_PROVIDERS`の廃止

それぞれHttpModuleとJsonpModuleになります

`CACHED_TEMPLATE_PROVIDER`の改名

CACHED_TEMPLATE_PROVIDERはRESOURCE_CACHE_PROVIDERに改名されました

`NgSwitchWhen`の廃止

非推奨でした。現在はNgSwitchCaseを使います

`ReplacePipe`の廃止

非推奨でした。

`UpgradeAdapter#addProvider`の廃止

非推奨でした。Angularモジュールを使います

commonパッケージのForms APIの廃止

@angular/commonパッケージから提供されていた古いForms APIは廃止されました。
@angular/formsを使います

Web Worker関連APIのパッケージ分割

これまではplatform-browserパッケージに同梱されていましたが、今回から独立したplatform-webworkerパッケージで提供さてます。
新しく@angular/platform-webworkerと@angular/platform-webworker-dynamicが公開されています。

その他の変更

core

`NO_ERRORS_SCHEMA`の追加

feat(core): add NO_ERRORS_SCHEMA that allows any properties to be set… · angular/angular@c631cfc

RC.5で、テンプレート中でのカスタムエレメントの使用を許可する、CUSTOM_ELEMENT_SCHEMAが実装されましたが、
今回はどんなテンプレートでもエラーを発生させないスキーマが追加されました。

CUSTOM_ELEMENT_SCHEMAと同様にNgModule.schemaに設定します。
基本的にアプリケーションでは使用しないAPIで、ユニットテスト時に使うことが想定されています。

TestBed.configureTestingModule({
  schemas: [NO_ERRORS_SCHEMA]
});

Animation APIのイベントオブジェクトに`totalTime`を追加

feat(animations): make sure animation callback reports the totalTime … · angular/angular@4f8f8cf

Animation APIのトランジションイベントで受け取れるオブジェクトが、AnimationTransitionEventというクラスのインスタンスになりました。
AnimationTransitionEvent#totalTimeプロパティでトランジションにかかった時間を取得できます。

compiler

compiler-cliのTypeScript 2.0対応

fix(compiler): allow tsc-wrapped to be compile with TypeScript 2.0 (#… · angular/angular@fc2fe00

今まで1.9.0-devバージョンに依存していたtsc-wrappedパッケージがTypeScript 2.0に対応しました

`entryComponents`から`declarations`への自動的な適用を廃止

fix(compiler): do not autoinclude components declared as entry points… · angular/angular@c56f3f2

これまでentryComponentsに指定されたコンポーネントは自動的にdeclarationsにも適用されていましたが、
今後はどちらも明示的に指定する必要があります。

テンプレート中に未知の要素が存在することを検知し、エラーを発生させるようになった

fix(DomSchemaRegistry): detect invalid elements · angular/angular@1df69cb

HTML標準の要素でもなければAngularモジュールに登録されたディレクティブでもない未知の要素について、
テンプレート中に存在するとエラーが発生するようになりました。
その要素がWeb Components仕様のカスタムエレメントである場合は、AngularモジュールにCUSTOM_ELEMENT_SCHEMAを追加します。
そうでない場合は適切なディレクティブをAngularモジュールに登録します。

この件で、一部のHTML標準の要素が認められていないバグが発生しています。
たとえば <time>要素については、こちらのIssueを参照してください。

`:host`,`:host-context`の修正

fix(ShadowCss): properly shim selectors after :host and :host-context… · angular/angular@af63378

ViewEncapsulationがデフォルトの時、:hostセレクターと:host-contextセレクターがうまく適用されないバグが修正されました

common

`DatePipe`がfloat形式の文字列を受け取れるように修正

fix(datePipe): allow float for date pipe input (#10687) · angular/angular@712c7d5

"123456789.11"のような文字列を扱えるようになりました。

http

bodyが空の時に`Responce#text()`が空文字列を返すように修正

https://github.com/angular/angular/commit/7cd4741

i18n

`LOCALE_ID`の導入

feat(i18n): provide LOCALE_ID and NgLocalization · angular/angular@ce4eae6

i18n機能用の新たなAPIとして、アプリケーションのロケールを管理するLOCALE_IDが追加されました。
次のようにロケールを指定できます。デフォルトはen-USになっています。

providers: [{provide: LOCALE_ID, useValue: 'en-US'}]

`CurrencyPipe`,`DatePipe`,`NumberPipe`がロケールを参照するように変更

https://github.com/angular/angular/commit/0a053a4

これまではen-USで固定だったこれらのパイプが、LOCALE_IDを参照するようになりました。

router

ルーティングのカスタムエラーハンドリングをサポート

feat(router): add support for custom error handlers · angular/angular@2fc5c57

RouterModule.forRoot()の第2引数で、ルーティングエラーのハンドル用関数を渡せるようになりました。
また、Router#errorHandlerに対しても関数をセット可能です

RouterModule.forRoot(appRoutes, {
    errorHandler: (error: any) => { 
        // ...
    }
});

this.router.errorHandler = (error: any) => {
    // ...
};

`RouterTestingModule.withRoutes`の追加

feat(router): add syntax sugar for confuguring RouterTestingModule (#… · angular/angular@53c99cf

ユニットテスト用のRouterTestingModuleにwithRoutes関数が実装され、
provideRoutes()関数を別に呼び出す必要がなくなりました

TestBed.configureTestingModule({
    imports: [
      RouterTestingModule.withRoutes(
          [{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]),
      TestModule
    ]
});

以上、RC.6の主な変更点でした。量こそ多いですがほとんどは非推奨APIの廃止です。
計画通りなら、次は2.0.0 Finalリリースです。
今月末にはロンドンでAngularConnectも開催されますので楽しみにしていましょう。

AngularConnect 2016 - Europe’s Largest Angular Conference

それではまた。

Angular 2 RC.5がリリースされました

Wed, 10 Aug 2016 21:13:11 +0900

どうも、らこです。ついにAngular 2のRC.5がリリースされました。
2.0最終リリースに向けた最後の大規模アップデートということで、変更の量は凄まじいものがあります。
NgModule APIを始めとした既存APIの刷新は、一見バージョンアップ対応のハードルは高そうに見えますが、
RC.5に合わせた書き方に直していけば、これまでよりもわかりやすく直感的なAPIになっていることが感じられるはずです。

それでは重要な変更点をピックアップしていきます。

2.0.0-RC.5

`NgModule`について

新しいNgModule APIについては、こちらの記事で簡単な解説をしているので、まずはそちらを読んでください。

破壊的変更

まずは破壊的変更についてまとめておきます。

bootstrappingに関する変更

一番大きな変更は、アプリケーションのbootstrappingに関するAPIの変更です。
NgModuleを前提とした新しいAPIが標準となり、今までのコンポーネントベースのbootstrapingは非推奨になりました。

アプリケーションを実装するにあたって、まずはモジュールを作ることになります。モジュールは次のように@NgModuleデコレータを使います。

import {NgModule} from '@angular/core';

@NgModule({
  declarations: […], // モジュールに読み込むディレクティブ、コンポーネント、パイプ
  imports: [BrowserModule], // 依存するモジュール
  providers: […], // DIプロバイダ
  boostrap: [MainComponent], // アプリケーションのエントリポイントになるコンポーネント
})
class MyAppModule {}

こうして宣言したモジュールは、次のようにbootstrappingします。

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’;

platformBrowserDynamic().bootstrapModule(MyAppModule);

AoT(Ahead of Time)コンパイルを利用する場合は、次のようになります

import {platformBrowser} from ‘@angular/platform-browser’;

platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);

Web Worker向けAPIの変更

これまでWeb Workerでアプリケーションを起動するにはbootstrapWorkerAppを使っていましたが、
WorkerAppModuleとworkerAppPlatform()を使って、モジュールをbootstrapすることになります。

bootstrapWorkerUiについても、WorkerUiModuleをインポートして、workerUiPlatform()でbootstrapします。

Server向けAPIの変更

serverBootstrapは廃止され、アプリケーションのモジュールをserverDynamicPlatform()でbootstrapすることになります

`Compiler`に関する変更

コンポーネントコンパイラは常にCompilerクラスでInjectするようになりました。
RuntimeCompilerクラスやOfflineCompilerクラスを直接Injectすることはできません。

`ApplicationRef`に関する変更

アプリケーションの主体がモジュールに移行したことから、ApplicationRef関連のAPIの多くが非推奨になりました。

`ApplicationRef#waitForAsyncInitializers`の廃止

アプリケーションの初期化が完了したことを受け取るためのAPIだったApplicationRef#waitForAsyncInitializersが廃止されました。
代わりにAppInitStatus#donePromise(): Promiseか、AppInitStatus#done: booleanを使います。
AppInitStatusは新しく導入されたクラスで、Injection経由でインスタンスを取得できます。

`ApplicationRef.registerBootstrapListener`の廃止

bootstrapが完了した後に呼び出されるイベントリスナーを登録するためのAPIだったApplicationRef.registerBootstrapListenerが廃止されました。
代わりに、APP_BOOTSTRAP_LISTENERトークンを使って、multi providerを設定します。

[
    {
        provide: APP_BOOTSTRAP_LISTENER,
        multi: true,
        useValue: (cmp: ComponentRef) => {
            // bootstrapされたコンポーネントのComponentRefが渡される
        }
    }
]

`ApplicationRef#dispose`の廃止

アプリケーションを破棄するApplicationRef#disposeが廃止されました。
代わりにモジュールを破棄するNgModuleRef#destroyを使います。

`AplicationRef#registerDisposeListener`の廃止

アプリケーションが破棄されたイベントを受け取るためのAPIが廃止されました。
代わりにモジュールのクラスでngOnDestroyライフサイクルメソッドを実装するか、
NgModuleRefクラスをInjectして、NgModuleRef#onDestroyメソッドでイベントリスナーを登録します。

`ApplicationRef#run`の廃止

ApplicationRef#runは廃止され、代わりにNgZone#runを直接使うようになります。

`ApplicationRef#injector`の廃止

ApplicationRef#injectorは廃止され、代わりにInjectorを直接Injectするか、NgModuleRef#injectorを使います。

`ApplicationRef#zone`の廃止

ApplicationRef#zoneは廃止され、NgZoneを直接使います。

`disposePlatform`の廃止

disposePlatformはdestroyPlatformに名前が変わりました。
全体としてdisposeからdestroyに統一するためです。

同様に、PlatformRef#dipose()からPlatformRef#destroy()に、
PlatformRef#registerDisposeListenerからPlatformRef.onDestroyに、
PlaformRef#diposedからPlatformRef#destroyedに、それぞれ改名されました。

テンプレートスキーマに関する挙動の変更

デフォルトでは、テンプレート中の未知の要素に対するデータバインディングはエラーを起こすようになっています。
ただし、CUSTOM_ELEMENTS_SCHEMAを有効にすると、要素名に-を含む場合はその要素をCustom Elementsとして扱い、既知の要素として扱います。

CUSTOM_ELEMENTS_SCHEMAは@NgModuleのschemasに設定します。

@NgModule({
    declarations: [MyComponentThatUsesAWebComponent],
    imports: [BrowserModule],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    boostrap:  [MyComponentThatUsesAWebComponent],
})
export class MyAppModule{}

`coreLoadAndBootstrap`/`coreBootstrap`の廃止

coreLoadAndBootstrapとcoreBootstrapは廃止されました。代わりにはbootstrapModuleかbootstrapModuleFactoryを使います。

RouteConfigと`declarations`に関する規定

ルート設定に含まれるすべてのコンポーネントは、モジュールのdeclarationsに含まれている必要があります。
これはJITコンパイル、AoTコンパイル、遅延ロードによらず常に必要です。

テスティングAPIに関する変更

@angular/core/testingをはじめとするテスティングAPIも、NgModuleを前提としたAPIに刷新されました。

`TestInjector`の廃止と`TestBed`の導入

これまでユニットテスト中のInjectionを管理していたTestInjectorが廃止され、
代わりにユニットテスト用のモジュールを管理するTestBed APIが導入されました。

withProvidersはTestBed.withModuleに、addProvidersはTestBed.configureTestingModuleに変更されます。
TestComponentBuilderもTestBed.createComponentに変更されます。

Example:

import {TestBed} from '@angular/core/testing';

describe('TestComponent', () => {
  beforeEach(() => {
    // テスト用モジュールのセットアップ
    TestBed.configureTestingModule({
      declarations: [TestComponent]
    });
  });

  it('component test', async(() => {
    // Component設定の上書き
    TestBed.overrideComponent(TestComponent, {set: {
      template: '<p>Content</p>'
    }});
    // コンポーネントのコンパイル
    TestBed.compileComponents().then(() => {
      // コンポーネントインスタンスの作成 
      var fixture = TestBed.createComponent(TestComponent);
      fixture.detectChanges();
      var compiled = fixture.debugElement.nativeElement;

      expect(compiled).toContainText('Content');
    });
  }));
});

テスト環境のセットアップを行うsetBaseTestProvidersも、TestBed.initTestEnvironment()に変更されます。

Before:

import {setBaseTestProviders} from '@angular/core/testing';
import {
    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
} from '@angular/platform-browser-dynamic/testing';

setBaseTestProviders(
    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);

After:

import {TestBed} from '@angular/core/testing';
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';

TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

`ngModel`の挙動の変更と、ユニットテストへの影響

ngModelは常に非同期的な挙動を取るようになりました。
つまり、ユニットテスト時にはComponentFixture#detectChangesの呼び出しではなく、
ComponentFixture#whenStableを使って非同期的に変更の反映を待つ必要があります。

Before:

let fixture = TestBed.createComponent(InputComp);
fixture.detectChanges();

let inputBox = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
expect(inputBox.value).toEqual('Original Name');

After:

let fixture = TedBed.createComponent(InputComp);
fixture.whenStable().then(() => {
    let inputBox = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
    expect(inputBox.value).toEqual('Original Name');
});

Formsのモジュール化

@angular/formsを使用するためのAPIが変わります。今後は各フォームAPI用のモジュールをインポートします。

Before:

import {disableDeprecatedForms, provideForms} from @angular/forms;

bootstrap(App, [
  disableDeprecatedForms(),
  provideForms()
]);

After:

import {DeprecatedFormsModule, FormsModule, ReactiveFormsModule} from @angular/common;

@NgModule({
  declarations: [MyComponent],
  imports: [BrowserModule, DeprecatedFormsModule],
  boostrap:  [MyComponent],
})
export class MyAppModule{}

`PLATFORM_PIPES`と`PLATFORM_DIRECTIVES`の廃止

どちらもNgModule#declarationsを使うようになりました

Routerの挙動の変更

クエリパラメータやフラグメントなど、URLに付随する要素は、デフォルトでは保持されなくなりました。
ナビゲーションの際に保持したい場合は、preserveQueryParams/preserveFragmentsオプションをtrueにします。

router.navigate(["/"], { preserveQueryParams: true });

routerLinkの場合は、[preserveQueryParams]として設定します。

<a routerLink="/" [preserveQueryParams]="true">top</a>

アニメーションのテンプレートシンタックスの変更

アニメーションのトリガーの式は@propという書き方でしたが、[@prop]に変更されました。

// 非推奨
<div @trigger="expression"></div>

// 新しい書き方
<div [@trigger]="expression"></div>

ngUpgrade関連の変更

ngUpgradeもモジュール対応しました。

Before:

let upgradeAdapter = new UpgradeAdapter();
upgradeAdapter.addProviders([myProvidersArray);

After:

@NgModule({
  providers: myProvidersArray
})
class MyModule {}

let upgradeAdapter = new UpgradeAdapter(MyModule);

その他の変更

破壊的変更以外にも要注意の変更はいくつもあるので、それぞれ見ていきます。

core

ngForの挙動の修正

e18626b

ngForの挙動が修正され、必要なときだけ要素の追加・移動・削除を行うようになりました。
この変更はアニメーションに影響するものです。

`selector`を持たないコンポーネントを許容するように修正

9b39e49

これまではselectorが設定されていないコンポーネントを動的に読み込んだとき、DOM上は<undefined>として展開されていましたが、
今後は<ng-component>として展開されるようになりました。

compiler

ngIfの右辺でパイプが使えるように修正

8efbcc9

*ngIfの右辺の式でパイプが使えるようになりました。

Safe Operator(`?.`)の評価の挙動を修正

4ec2a30

a?.b.cという式についてaがnullあるいはundefinedだった場合、これまではaをnullと評価したあとにbの評価に進んでしまい、
a?.b?.cと書かないとエラーになっていました。
この修正により、aの時点でSafe Operatorが働いた場合はその先の評価を行わなずに全体をnullとするように修正されました。

common

`CurrencyPipe`の規定の挙動の変更

d455942

CurrencyPipeの各パラメータの規定値が、Intl APIのデフォルトを使うようになりました。

`NumberPipe`がstring型を許容するようになった

f3dd91e

NumberPipeが文字列型の数値も許容するようになりました。

http

HTTPヘッダの処理をcase-insensitiveに修正

7f64782

これまでケースセンシティブになっていたのが修正されました

`content-type`ヘッダの上書きをサポート

bdb5912

bodyに渡されたオブジェクトの型から自動的に判別されるcontent-typeは、
headersに明示的に指定されたもので上書きできるようになりました。

`arraybuffer`型と`blob`型のレスポンスをサポート

1266460, 76b8a49

Response#arrayBuffer()とResponse#blob()がサポートされました。

OPTIONSメソッドをサポート

0bd97ec

HTTPのOPTIONSメソッドのためのHttp#options()が追加されました。

router

routerについては個別のチェンジログがあります

Router CHANGELOG

`RouterModule`の導入

Routerもモジュール化され、RouterModuleをインポートするようになります。

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, {enableTracing: true})]
})
class MyAppModule {}

クエリパラメータの値が空の時の挙動を修正

0d6cc17

値が空(?key=)のクエリパラメータを含むURLで初回のルーティングを行うと、値にtrueがセットされてしまうバグを修正しました。

`canActivateChild`/`canLoad`の追加

ガードの種類に、すべての子ルートのアクティベーションをチェックするcanActivateChildと、
遅延ロードが可能かどうかをチェックするcanLoadが追加されました

`RouterOutlet`のイベントを追加

<router-outlet>要素からactivateイベントとdeactivateイベントが発火されるようになりました。

GuardとResolverがPromiseをサポート

各種GaurdとResolverのインターフェースで、戻り値としてPromiseが使えるようになりました。
Observableと同様に、Promiseを返した場合は完了するまでナビゲーションが待機されます。

`ActivateRoute`が`routeConfig`を返せるようになった

現在アクティブなルートの設定をActivateRouteから取得できます。

`queryParams`や`fragment`が`ActivateRoute`から取得するようになった

これまでRouter#routerStateから取得していたクエリパラメータやフラグメントはActivateRouteから取得するようになりました

forms

`NgForm#reset`の追加

da8eb9f

フォームを初期化するNgForm#reset()が追加されました

multipleなselect要素で`change`イベントを使うように修正

3cbded6

これまでinputイベントで処理していたバグが修正されました。

フォーム内のコントロールを簡単に取得するためのAPIを追加

8d44999

フォーム内のコントロールを名前で取得できるget()メソッドが追加されました。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <form #f="ngForm">
        <input name="a" ngModel>
      </form>
      <button (click)="checkForm(f)">Check Form</button>
    </div>
  `,
})
export class App {
  checkForm(f: NgForm) {
    f.form.get("a") // FormControl
  }
}

コントロールに`invalid`/`pending`プロパティを追加

e0eea6c

コントロールの状態を取得するプロパティが追加されました。

animation

`Component#host`プロパティでのアニメーショントリガーの設定をサポート

806a254

@Componentのhostプロパティでアニメーションのトリガー設定ができるようになりました。
この結果として、Routerによるナビゲーションにアニメーションを付与することができるようになります。
[@routeAnimation]をtrueに設定しておくと、routeAnimationトリガーで、表示(void => *)と、離脱(* => void)のアニメーションを記述できます。

@Component({
  selector: 'home',
  template: `Home`,
   host: {
     '[@routeAnimation]': 'true',
   },
  animations: [
    trigger('routeAnimation', [
      state('*', style({transform: 'translateX(0)', opacity: 1})),
      transition('void => *', [
        style({transform: 'translateX(-100%)', opacity: 0}),
        animate(1000)
      ]),
      transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0})))
    ])
  ]
})
class HomeCmp {}

実際に動くサンプルはこちらです

RC.5の変更点のまとめは以上です。かなり抜粋しましたがそれでもこの量です。
今回のアップデートではAoTコンパイルに関する情報も出てきていますが、この記事では扱いません。
後日AoTコンパイルの手順については改めて書こうと思います。

それではFinalリリースまであと少し、頑張っていきましょう。よい夏を！

ng-sake#5を開催しました

Sat, 06 Aug 2016 11:26:50 +0900

どうも、らこです。8/3にng-sakeというイベントの第5回を開催しましたので、そのレポートです。

ng-sake #5 - connpass

今回の参加者は10人で、なんと欠席は1人だけでした。用意したお酒が無駄にならなくてよかったです。

以下はディスカッションの内容のざっくりしたまとめです

Animationについていくつか質問があります。メトロノームに前回アドバイス頂いた部分を反映しましたので、その報告と新たな質問（Animation）をさせて下さい。

kawakamiさんが作っているメトロノームアプリの相談。
前回の相談でコンポーネントツリーの構造が改善されたので、次はアニメーションを導入してみた話。

Atomic Designについて雑に話したい

Angular2とAtomic Designは微妙に噛み合わないなという話をした。
Angularでコンポーネントを作ろうと思う粒度はせいぜいMoleculeで、ヘタするとOrganismで1コンポーネントもあり得る。
実装からコンポーネントを考えるとだいたいトップダウンで、再利用できそうなところを分割していくけど、
Atomic Designはボトムアップだから、アプリケーションの開発には向いてないなという感じに落ち着いた。

Native Apps vs Web Apps　みなさんどのように考えているか聞きたいです

よく言われるが、リーチはWebが強いので入り口に使おうという感じ。
あと、ネイティブアプリだとスプラッシュスクリーンで起動時間をごまかすのがあまり忌避されないのがズルい。

Custom Form Controlsの使いどころ。 http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

アプリケーション作者のためのものじゃなくてコンポーネントライブラリ作者向けだという結論

RoutingのGuardの具体的な使い道。

編集画面からの保存前離脱チェックや、認証チェックなど。実装としてはただのServiceなのでDI経由で何でも使えて自由に使える

サーバークライアント両方やる案件として、チームでどういう人数比率が一般的なのか気になる

だいたいフロントが少数で、サーバーのほうが人数が多いようだった。

ActivatedRouteのparamsをsnapshotではなくObservableとして受け取らなければならないケースにどういったものがあるか。

同じルートに遷移する場合。 /user/11 から user/12 に遷移する時はコンポーネントが再利用されるので動的にパラメータを受け取らないといけない。

アニメーションをCSSでやるのかAnimationAPIでやるのか。最近のトレンドを踏まえつつ、これからのアニメーション作り方、これら使い分けについて有識者の話を聞きたいです。

残念ながら有識者はいなかったけど、Angular2でやるならWeb Animation APIがよさそう。
Specはちょうど8月頭にドラフトが更新されてた。

https://w3c.github.io/web-animations/

そろそろ案件で使いたいのでプロジェクトのScafoldについて。現実解を知りたいです。

みんな好きにやってる。yo使ってる人は全然いなかった。yeoman-generatorを作るのがつらい話もあった。

Angular-CLIがwebpack対応したらしいけど誰か試しました？

誰も試してなかった。

rc.5からAnimation APIでページ遷移のアニメーションができるようになるという話ですが、そもそもページ遷移にアニメーションを導入したいかしたくないか。またはすべきかすべきでないか。

みんなやりたかった。

ng2にもng-cloak的な仕組み欲しい気がする

必要ないのでは？という雰囲気。

このイベントの名前もうちょっと良い感じのないかなと思いつつある。Angular酒部とか、井戸端Angularとかご意見求む

ng-sakeでいいよという結論

ここ2回くらいはLTタイムを無くしているけど、LTがあるイベントのほうが行きたいものですか？

次回2枠くらい復活させてみようと言う話になった

WebComponents ベースのライブラリを Angular 2 で wrap しようとするとカオスになる問題の解決策について

Custom ElementsとAngular 2の相性の悪さについて。RC.5で追加される機能で解決する問題だった。

Angular2にむけて(そうじゃなくても)TypeScriptを最近始めた人多いと思うけど、何を教材にしました？

公式のハンドブックを読みながら覚えた人が多かった。公式のチュートリアルはあまりよくなかったらしい。

Angular(1.xでも2.xでも) Component Guide(Style Guide)を作るとしたら、どんな方法が良いのでしょう？ dgeniは一度爆死したことがあるので、使いたくありません。

１つそれ用のアプリを作るしかないよねという結論。
Angularチームもperiscopeというアプリケーションでドッグフーディングしているし、
Material2もデモアプリを同梱している。

アーキテクチャどうしてますか？

データフロー的な話。一切Component内に同期的なステートを持たずに、すべてをSubjectにするみたいなやり方はすごいけど原理主義っぽかった。

SPA全般ですが、戻るボタンで前のページに戻ったときなどに、ページが再構築されてしまうのが微妙だなと思うのですが、なにか対策してますか？ APIのリクエスト結果をキャッシュするとか？

スクロール位置とか、ページングとかの話。URLにシリアライズできるならルーティングをちゃんとやって、
それ以外はlocalStorageとかsessionStorageで持つしかないよねという感じ。
他にもモーダルで出してしまえばそもそも元の画面を捨てずに済むよねというアイデアも。

新しいプロジェクトでAngular2かReactで迷ってますが、なにか選定のポイントなどアドバイスがあれば聞きたいです。

結局人による。選べるならやりたい方やればいい。モックアプリみたいなものを両方で実装してみて感触がよかったほうでいいんじゃないという声も

NgModule導入について

Sat, 30 Jul 2016 20:53:25 +0900

どうも、らこです。RC.5のリリースがおそらく来週と迫っていますが、多くのバグ修正と共に新しい機能が追加されます。
NgModuleはこれまでのAngular2で不便だったこと、複雑だったことを一気に解決してくれる新機能です。

RCも大詰めとなったこのタイミングで導入されることに困惑するかもしれませんが、
ぜひとも対応してもらいたいと思います。

はじめに

NgModuleは完全に新しく導入されたAPIであり、既存のAPIへの破壊的変更ではありません。
ただし、従来の方法は非推奨となり、stableリリースの段階では廃止される予定です。
RC.5からは移行期間に入るものと思っていてください。

NgModule

NgModuleの概要についてスライドを作ってあるので、これをベースに解説します。

NgModuleの概要

NgModuleは、ディレクティブやパイプ、サービスなどをひとまとめにしたモジュールを宣言するためのAPIです。
@Componentなどと同じようにデコレータを使って宣言します。

アプリケーションの起動に最低限必要なモジュールは次のようになります。

import {NgModule, ApplicationRef} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
class AppModule {
}

そして、NgModuleで宣言したモジュールを使ってアプリケーションを起動するための、新しいbootstrap関数があります。

import {AppModule} from './app.module';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);

NgModuleで作ったモジュールを、各プラットフォームのbootstrapModuleメソッドで起動するという流れになります。

NgModuleの中身

それではNgModuleデコレータについてもう少し詳しく見ていきましょう

declarations

このプロパティは、そのモジュールの中で宣言されているディレクティブとパイプを登録する場所です。
このディレクティブにはもちろんコンポーネントも含みます。

@NgModule({
     declarations: [
        AppComponent,
        MyComponent,
        MyDirective,
        MyPipe,
        ...SOME_LIBRALIES_DIRECTIVES
    ],
})
class AppModule {}

これまでは、FooDirectiveを宣言したあと、それを使うには@Componentのdirectivesプロパティに毎回追加していました。
パイプにおいても同様にpipesプロパティに追加する必要がありました。

NgModuleのdeclarationsに登録されたディレクティブやパイプは、そのモジュール内でならどこでも使えるようになります。
つまり、自作したディレクティブ・コンポーネント・パイプはすべてdeclarationsに登録しておけばよいです。

ROUTER_DIRECTIVESのようなライブラリからインポートしたものも当然declarationsに追加することはできますが、
これに関しては後で説明する方法によって、そもそもROUTER_DIRECTIVESが不要になります。

providers

このプロパティは、そのモジュールのトップレベルのプロバイダを宣言する場所です。
従来のbootstrap関数の第2引数に渡していた配列がそのまま移ってきたと思ってください。

@NgModule({
    providers: [
        MyService,
        SomeLibraryService,
    ],
})
class AppModule {}

完全に旧APIの上位互換となる declarations と違い、@Componentのprovidersは非推奨にはなりません。
階層的DIの性質上、任意のコンポーネントでプロバイダを登録できる必要があるからです。
とはいえ、それはライブラリ作者のような複雑な使い方をする人のためのもので、
アプリケーションを普通に作っている中では基本的にすべてNgModuleのprovidersに登録しておけばよいです。

imports

NgModuleの中で一番重要と言えるのがこのimportsです。
importsプロパティを使うことで、自分のモジュールに別のモジュールを取り込むことができます。

例えば、@angular/commonや@angular/platform-browserから提供されている機能(ディレクティブなど)を取り込むには次のようにします。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';

@NgModule({
    imports: [BrowserModule, CommonModule]
})
class AppModule {}

importsプロパティに登録されたモジュールからは、後述のexportsプロパティで指定されたものと、providersプロパティのプロバイダが取り込まれます。

@angular/routerも専用のモジュールを提供していますが、静的メソッドを使った少し特殊な方法を使います。
インポートと同時にルーティングの設定を渡すことで、動的に生成されたモジュールを取り込んでいます。

import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

import {APP_ROUTES} from './app.routes';

@NgModule({
    imports: [
        RouterModule.forRoot(APP_ROUTES, {useHash: true})
    ]
})
class AppModule {}

RouterModuleをインポートすれば、自動的にROUTER_DIRECTIVESが取り込まれるので、どこでも<router-outlet>やrouterLinkを使えるようになります

exports

importsと対をなすのが、このexportsです。
exportsプロパティには、そのモジュールがimportsに設定された時に提供するディレクティブとパイプを指定します。
アプリケーション中ではあまり使うことはなく、基本的にはライブラリ作者用のAPIです。

@NgModule({
    declarations: [AwesomeComponent, AwesomePipe]
    exports: [AwesomeComponent, AwesomePipe],
    providers: [AwesomeService]
})
export class AwesomeModule {
}

bootstrap

bootstrapプロパティには、アプリケーションのエントリポイントになるコンポーネントを指定します。
いままでbootstrap関数に渡していたコンポーネントを指定しておけば大丈夫です。

entryComponents

一番難しいのがこのentryComponentsプロパティです。
このプロパティではオフラインコンパイルを行う時にエントリポイントとなるコンポーネントを指定します。
詳しく説明しようとするとまずオフラインコンパイルの説明からしないといけないので省略しますが、
ここに指定するコンポーネントは、

アプリケーションのエントリポイントになるコンポーネント
Lazy Loadingのよって実行時にあとから読み込まれるコンポーネント

以上のどちらかに当てはまるコンポーネントです。
ただし、bootstrapプロパティに指定してあるコンポーネントは自動的にentryComponentsにも追加されるので、
後者の、遅延ロードされるコンポーネントだけを指定することになります。

schemas

スライドでは省略しましたが、schemasも面白い機能です。
このプロパティには、アプリケーション中で有効にするスキーマを設定できます。

現在使用可能なスキーマはCUSTOM_ELEMENTS_SCHEMAだけです。
このスキーマを有効にすると、Web標準のCustom ElementsをAngular 2のテンプレート中で使えるようになります。
具体的には、そのモジュール内のディレクティブとコンポーネントには一致せず、要素名に-を含む場合はそれをCustom Elementsとして解釈します。
Custom Elementsであると解釈すれば、その要素は標準のHTML要素と同様にデータバインディングやイベントハンドリングが許可されます。

@Component({
  selector: 'some-component',
  template: `
    <some-custom-element [someUnknownProp]="true"></some-custom-element>
  `,
})
export class SomeComponent {
}

@NgModule({
    schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    declarations: [SomeComponent]
})
export class ModuleUsingCustomElements {
}

RC.4からの移行

NgModuleに関して、移行する必要があるのは次のものです。

bootstrap関数の呼び出し
@Componentのdirectives
@Componentのpipes

まずはアプリケーションのモジュールをひとつ宣言しましょう。
一般的に必要なモジュールも読み込みます。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {RouterModule} from '@angular/router';

import {APP_ROUTES} from './app.routes';

@NgModule({
    imports: [BrowserModule, CommonModule, FormsModule, HttpModule, RouterModule.forRoot(APP_ROUTES)]
})
export class AppModule {}

次に、bootstrap関数に渡していたコンポーネント(AppComponentとする)をモジュールに追加します。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';

@NgModule({
    imports: [BrowserModule, CommonModule, FormsModule, HttpModule],
    declarations: [AppComponent],
    entryComponents: [AppComponent]
})
export class AppModule {}

RC.5の時点では、@Componentのdirectivesやpipesに指定されているディレクティブやパイプは、
そのコンポーネントがdeclarationsに含まれていれば自動的に巻き上げられるようになっています。
なので、とりあえず最初はAppComponentだけをdeclarationsに追加しておけば今までどおりの動作が維持できます。

モジュールが作成できたら、bootstrapする準備をします。
まずはモジュールからコンポーネントを起動する処理をモジュールのコンストラクタに書きます。

import {NgModule, ApplicationRef} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';

@NgModule({
    imports: [BrowserModule, CommonModule, FormsModule, HttpModule],
    declarations: [AppComponent],
    entryComponents: [AppComponent]
})
export class AppModule {

    constructor(appRef: ApplicationRef) {
        appRef.bootstrap(AppComponent);
    }
}

次に、プラットフォームからモジュールを起動する処理を書きます。
これは元々bootstrap関数が呼び出されていた場所を置き換えます。

import {platformBrowserDynamic} from '@angular/browser-platform-dynamic';

import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

これでbootstrapからbootstrapModuleへの移行が完了です。
ここから先は、各コンポーネントに書かれたdirectivesやpipesをdeclarationsに少しずつ回収していけばよいです

テストのNgModule化

現在、テスト用のAPIもモジュール対応が進められています。
こちらは残念ながら破壊的変更が行われます。

withProvidersからTestBed.withModuleに変更
addProvidersからTestBed.configureTestingModuleに変更
TestComponentBuilderが廃止され、TestBed.createComponentに変更

どの変更も、DIを直接使うのではなくテスト用のモジュールを設定してテストするいう流れに変わるものです。

詳細については、公式のチェンジログが待てないというかたは該当のコミットを読むなどするとよいでしょう

refactor(testing): introduce new testing api to support ng modules · angular/angular@d0a95e3

まとめ

NgModuleへの置き換えはそれほど大変ではないことがわかったと思います。
そして、今まで複雑だった部分を単純にしてくれる機能であることもわかったでしょうか。
RC.5のリリースは数日中に来ると思われるので、モジュールの波に乗り遅れないように頑張ってください。

Angular 2 RC.4の変更点

Fri, 08 Jul 2016 21:57:10 +0900

こんにちは、らこです。RC.3に引き続きアップデートからしばらく経ってしまいましたが、変更点についてまとめておきます。
今回は破壊的な変更もそこそこあるのでしっかり把握しておきましょう。

2.0.0-RC.4

破壊的変更

テスト関連

テスト関連の変更が非常に多いのでざっくりまとめます。

なくなったもの

it, iit, xit
describe, ddescribe, xdescribe
expect
toThrowErrorWith
toMatchPattern

Jasmineの関数をラップしていたものたち

Before:

import {beforeEachProviders, it, describe, inject} from '@angular/core/testing';

describe('my code', () => {
    beforeEachProviders(() => [MyService]);

    it('does stuff', inject([MyService], (service) => {
      // actual test
    });
});

After:

import {addProviders, inject} from '@angular/core/testing';

describe('my code', () => {
    beforeEach(() => {
        addProviders([MyService]);
    });

    it('does stuff', inject([MyService], (service) => {
        // actual test
    });
});

MockLocationStrategy
browserDetection
dispatchEvent
el
normalizeCSS
stringifyElement

内部用APIに。LocationのテストはSpyLocationで。

injectAsync
clearPendingTimers
Log
MockAppliacationRef
MockNgZone
clearPendingTimers
getTypeOf
instantiateType

不要になったものたち

変わったもの

beforeEachProviders => addProviders

任意のタイミングで使う汎用のAPIとなった

TestComponentBuilder.createSync

与えられたコンポーネントのテンプレートが事前にインラインにコンパイルされていなければエラーを出すようになった

移動したもの

TestComponentBuilder
TestComponentRenderer
ComponentFixture
ComponentFixtureAutoDetect

compiler/testing => core/testing に移動しました。

その他

httpモジュールのURLSearchParamsを使った時に、クエリパラメータが誤ってエンコードされていたのを修正したため、
RC.4の前後でリクエストのクエリパラメータが変化することがあります。

RC.4からのデフォルトでは、クエリパラメータ中に含まれる@ : $ , ; + ? /記号はそのまま使用されます。
この挙動をカスタマイズするには、 URLSearchParamsのコンストラクタの第2引数にQueryEncoderを継承したクラスのインスタンスを渡します。

import {URLSearchParams, QueryEncoder} from '@angular/http';

class MyQueryEncoder extends QueryEncoder {
    encodeKey(k: string): string {
        return myEncodingFunction(k);
    }
 
    encodeValue(v: string): string {
        return myEncodingFunction(v);
    }
}
let params = new URLSearchParams('', new MyQueryEncoder());

RC.3以前は同じ要素に対して*ngForと*ngIfのように*プレフィックスのディレクティブ(テンプレートバインディング)を複数付与することができていましたが、
今後はこれは禁止されます。
これまでは使用可能ではありましたが大抵の場合は想定外の結果を招いていました。
*ngIfと*ngForが両方必要な場合には入れ子要素にするか、*プレフィックスを使わずに<template>タグを明示的に使う記法を選択してください。
DomEventsPluginとKeyEventsPluginはこれまでパブリックなAPIとして公開されていましたが、非公開APIとなりました。
また、非推奨になっていたBROWSER_PROVIDERSは削除されました。

アニメーション関連

アニメーション周りのバグ修正がいくつか入っています。

animations: ensure void => * animations are triggered when an expression is omitted (e0b0a59), closes #9327 #9381

void => *をトリガーとするアニメーションが条件により発火しないバグが修正されました

animations: make sure the easing value is passed into the web-animations player (c43aec2), closes #9517 #9523

easingオプションがアニメーションプレイヤーに渡されていなかったバグが修正されました。

その他

support *directive on <template> (#9691) (3fec279), closes #7315

*プレフィックスのディレクティブが<template>タグ上でも使えるようになりました。

core: properly report missing providers and viewProviders (#9411) (f114dd3), closes #8237

コンポーネントやサービスのインスタンス化において、解決できないDIのがあったときのエラーがわかりやすくなりました。

One or more of providers for "MyBrokenComp3" were not defined: [?, SimpleService, ?]. のように、解決できなかった位置に?が表示されます。

forms: add select multiple accessor as built-in accessor (9f00a1b)

multipleなselect要素の値へのアクセスをデフォルトでサポートするようになりました。

forms: emit statusChange when child controls have async validator (#9652) (797914e)

async validatorを使っているときに、バリデーション結果が変化したことをstatusChangeイベントで検知できるようになりました

forms: make radio button selection logic more flexible (#9646) (ed0ade6), closes #9558

これまでラジオボタンに対するremoveControlはtimeoutが必要でしたが、必要なくなりました。

forms: ngModel should emit valueChanges and statusChanges asynchronously (97a2119)

ngModel がvalueChangesやstatusChangesイベントを発火するタイミングが非同期的になりました。

Features

機能の追加もいくつか行われています。

compiler: support sync runtime compile (bf598d6), closes #7084 #9594

ComponentResolverに代わる新しいAPI、 Compilerが、compileComponentAsyncとcompileComponentSyncの2つのメソッドを持つようになりました。
compileComponentSyncはコンポーネントを同期的にコンパイルできますが、テンプレートがインライン、あるいはすでに読み込まれたものでなければなりません。

core: add [@Component](https://github.com/Component).precompile and ComponentFactoryResolver (6c5b653), closes #9543

@Componentデコレータに新しいプロパティprecompileが追加されました。
このプロパティは、対象のコンポーネントがOffline Compileされる際に、一緒にコンパイルされて欲しいコンポーネントを指定できるものです。
今はまだドキュメントがないですが、RC.5が出てくる頃には用意されるでしょう。

forms: add support for formArrayName (c03e1f2), closes #9251
forms: add support for standalone ngModel dirs inside forms (6edf047), closes #9230
forms: expose ValidatorFn and AsyncValidatorFn (17dcbf6), closes #8834
forms: make valueChanges and statusChanges available on abstract control directives (de12710)
forms: support updating of validators on exiting controls (#9516) (638fd74)
forms: use formControlName on radio buttons when name is absent (#9681) (0961bd1)

Forms周りは引き続き作業中という感じです。

QueryList: implement some() (#9464) (f6a410a), closes #9443

QueryList#.some()が実装されました。

router: add pathMatch property to replace terminal (fcfddbf)

RouteConfigのterminalが廃止され、pathMatchフィールドが追加されました。

pathMatch: "full"の場合は、パスと完全一致した時にだけそのルートが使われます。

router: implement data and resolve (f2f1ec0)

ActivatedRouteにdataが追加されました。また、resolveも追加されました。

dataは単純に固定の値をRouteConfig側で設定しておき、それがActivatedRouteからアクセスできるだけの機能です。
主に同じコンポーネントを複数のルートで使う時に、どのルートが使われているかの判別などに用います。

resolveはDIを使って、動的なデータをActivatedRouteから受け取るための機能です。
dataもresolveもまだ公式ドキュメントは追いついていないので、
このあたりのテストコードを読むと使い方がわかるでしょう。

いやはや、今回も長かったですね。RC.5ではAppModuleが導入され、bootstrap周りに大きな動きが出る予定です。
PLATFORM_DIRECTIVESやPLATFORM_PIPES、さらにはAPP_INITIALIZERあたりが非推奨APIとなります。
デザインドキュメントはこちらにあるので、先取りしたい方は読んでおくとよいでしょう。
トラッキングイシューはこちらです。

それではまた。

Angular2 RC.3の変更点

Wed, 29 Jun 2016 00:25:32 +0900

どうも、らこです。リリースから少し時間が経ってしまいましたが、RC.3の変更点をまとめておきます。

CHANGELOG.md

Bug Fixes

RC.2までの幾つかのバグが修正されました。重要なものだけをピックアップします。

change_detection: ChangeDetectorRef reattach should restore original mode (773c349), closes #7078 #7080

ChangeDetectorRef.reattachが常にCheckAlwaysを使用していたバグが修正されました。

forms: ngModel should export as ngModel (8e6e90e)

NgModelディレクティブがngFormとしてexportされていたのが修正されました。

perf: support prod mode again (c0f2a22), closes #9318 #8508 #9318

RC.2でうまく動かなくなっていたenableProdModeが復活しました。

Features

新しい機能や改善も幾つか含まれています。

compiler: make interpolation symbols configurable (@Component config) (#9367) (1b28cf7), closes #9158

Componentデコレータにinterpolationプロパティが追加され、そのコンポーネントのテンプレート中でのInterpolationのシンボルが変更できるようになりました。
この機能は私が実装して、@vicbがしっかりレビューしてくれました。
merge前のちょっとしたミスで私のcommitではなくなってしまいましたがそれはご愛嬌ということで。

datePipe: numeric string support (5c8d315)

DatePipeが文字列型の数値を受け付けられるようになりました。

QueryList: support index in callbacks (5fe6075), closes #9278

QueryListの各メソッドのコールバックでindexが第2引数に追加されました。

radio: support radio button sharing a control (39e0b49)

ラジオボタンに対するngModelが使いやすくなりました。
複数のラジオボタンに対して同じオブジェクトをngModelで渡した時に、選択状態のラジオボタンのvalueがセットされるようになりました。

今までは配列やオブジェクトなどを用いて面倒でしたが、Angular 1と似た書き方になり、とても簡単になりました。

<form>
    <input type="radio" name="food" [(ngModel)]="data.food" value="chicken">
    <input type="radio" name="food"  [(ngModel)]="data.food" value="fish">
    <input type="radio" name="drink" [(ngModel)]="data.drink" value="cola">
    <input type="radio" name="drink" [(ngModel)]="data.drink" value="sprite">
</form>

BREAKING CHANGES

わずかな破壊的変更も含まれています。

Parse5Adapter is no longer exported as public API, use serverBootstrap()

Parse5AdapterはこれまでパブリックなAPIでしたが、RC.3からはexportされなくなりました。
代わりにserverBootstrap()関数を呼び出します。

以上、RC.3の変更点でした。RC.2でパフォーマンスの問題を発生させてなければもう少し先になっていたと思いますが、
思っていた以上に深刻な不具合だったので、だいぶ前倒しでRC.3がリリースされました。
RC.4は予定通り、FormsやTestingのAPIの改善が完了してからの落ち着いたリリースになるでしょう。

それではまた。

Angular 2 RC.2がリリースされました

Thu, 16 Jun 2016 20:51:37 +0900

追記 : CHANGELOG以外の情報を追加しました。

どうも、らこです。ようやくRC.2がリリースされたので変更点を確認しましょう。
1ヶ月以上の間に多くの変更が盛り込まれたので数は多いですが、破壊的変更はほとんどないので、
落ち着いて移行していきましょう

angular/CHANGELOG.md at master · angular/angular

Angular 2 RC.2 変更点

CHANGELOG.mdを見ればわかるようにとんでもない変更の数なので、分類してまとまりごとに見ていきましょう。
まず、アプリケーション開発に関係のあるものだけを抽出すると次のようになります

Bug Fixes

bootstrap: Swap coreBootstrap() and coreLoadAndBootstrap() arguments (f95a604)
compiler: Support for comment finishing with multiple dashes (60a2ba8), closes #7119
compiler: have CSS parser support nested parentheses inside functions (ceac045), closes #7580
Control: Support select multiple with Control class (#8069) (84f859d)
facade: change EventEmitter to be sync by default (#8761) (e5904f4)
forms: rename old forms folder to forms-deprecated (515a8e0)
forms: update accessor value when native select value changes (7a2ce7f), closes #8710
forms: update value and validity when controls are added (50acb96), closes #8826
forms: separate ngModelGroup from formGroupName (5c0cfde)
http: Set response.ok (9234035), closes #6390 #6503
metadata: Allow spacing in multiple selectors (#7418) (b2e804c)
ngSwitch: use switchCase instead of switchWhen (#9076) (e1fcab7)
Request: Change Request.text’s return type to string (b2e0946), closes #8138
router: Added pushState fallback for IE 9 browser. (bab6023), closes #6506 #7929
testing: add discardPeriodicTasks to be used with fakeAsync (#8629) (0cb93a4), closes #8616
upgrade: allow deeper nesting of ng2 components/directives (#8949) (48bf349)
upgrade: allow functions for template and templateUrl (#9022) (a19c4e8)
upgrade: Ensure upgrade adapter works on angular.js 1.2 (#8647) (cbc8d0a)
upgrade: fallback to root ng2 injector when element is compiled outside the document (#86 (db82906)
upgrade: make bindings available on $scope in controller & link function (#8645) (6cdc53c)

Features

ChangeDetectorRef: make detectChanges() correct (6028368), closes #8599
common: DatePipe supports ISO string (abc266f), closes #7794
common/datePipe: change date formatter to use correct pattern closes #7008 (#8154) (324f014), closes #7008 [(#8154](https://github.com/(/issues/8154)
compiler: Add support for <ng-container> (0dbff55)
ComponentResolver: Add a SystemJS resolver for compiled apps (#9145) (a6e5ddc)
core: add a component resolver that can load components lazily using system.js (1a0aea6)
core: introduce support for animations (5e0f8cf), closes #8734
core/linker: add SimpleChanges type to lifecycle_hooks to simplify OnChanges signature (0a872ff), closes #8557
debug: collect styles and classes for the DebugElement (155b882)
enableDebugTools: return ComponentRef (4086b49)
forms: add the submitted flag to NgForm and NgFormModel directives (420e83a), closes #2960 #7449
forms: allow ngModel to register with parent form (4ed6cf7)
forms: compose validator fns automatically if arrays (61960c5)
forms: support setting control name in ngModelOptions (a191e96)
forms: add easy way to switch between forms modules (22916bb)
http: added withCredentials support (95af14b), closes #7281 #7281
http: automatically set request Content-Type header based on body type (0f0a8ad), closes #7310
http: implement Response.prototype.toString() to make for a nicer error message (89f6108), closes #7511
http: set the statusText property from the XMLHttpRequest instance (3019140), closes #4162
NgTemplateOutlet: add context to NgTemplateOutlet (164a091), closes #9042
NgZone: isStable (587c119), closes #8108
security: allow data: URLs for images and videos. (dd50124)
security: allow url(…) style values. (15ae710), closes #8514
security: Automatic XSRF handling. (4d793c4)
add minified bundles (9175a04)
security: expose the safe value types. (50c9bed), closes #8568
security: support transform CSS functions for sanitization. (8b1b427), closes #8514
security: warn users when sanitizing in dev mode. (3e68b7e), closes #8522
shadow_css: add encapsulation support for CSS @supports at-rule (cb84cbf), closes #7944
ViewEncapsulation: default ViewEncapsulation to configurable (f93512b), closes #7883

だいぶ絞りましたがまだ多いですね。1件ずつ見ていくとキリがないのでグループごとにまとめていきます

コア機能関連

facade: change EventEmitter to be sync by default (#8761) (e5904f4)

EventEmitter によるイベントの伝播が、デフォルトで同期処理になりました。
標準のHTML要素からのイベントと同じ振る舞いをするようになり、@Output との区別をしなくてよくなりました。

NgZone: isStable (587c119), closes #8108

NgZone が isStable プロパティを持ちます

コンポーネント関連

compiler: Support for comment finishing with multiple dashes (60a2ba8), closes #7119

 のように複数のダッシュ記号で閉じられたコメントが許容されるようになりました

compiler: have CSS parser support nested parentheses inside functions (ceac045), closes #7580

コンポーネントが読み込むCSS内で入れ子の関数が許可されました

ChangeDetectorRef: make detectChanges() correct (6028368), closes #8599

私のPRです。
ChangeDetectorRef#detectChanges() が、 detach 状態でも動作するように修正されました

compiler: Add support for <ng-container> (0dbff55)

コンパイル後にHTMLコメントになりDOMに影響しない <ng-container> が導入されました。
テンプレート内で階層構造だけを作りたいときに使えます。例えば ngSwitch で無駄なdivタグを作らなくてよくなります。

core/linker: add SimpleChanges type to lifecycle_hooks to simplify OnChanges signature (0a872ff), closes #8557

ngOnChanges メソッドに渡される引数の型が SimpleChanges 型になりました。
実体は{[key:string]: SimpleChange} のタイプエイリアスです

metadata: Allow spacing in multiple selectors (#7418) (b2e804c)

これも私のPRです。
@ViewChildren や @ContentChildren に文字列でテンプレート変数を渡すときにカンマ区切りの中にスペースを許容するようになりました

shadow_css: add encapsulation support for CSS @supports at-rule (cb84cbf), closes #7944

ViewEncapusulation.Emulated がCSSの @supports に対応しました。

ViewEncapsulation: default ViewEncapsulation to configurable (f93512b), closes #7883

これも私のPRです。
Component デコレータに encapsulation プロパティを設定しなかった時のデフォルトの設定を変更できるようになりました。
CompilerConfig から変更可能です

ComponentResolver: Add a SystemJS resolver for compiled apps (#9145) (a6e5ddc)
core: add a component resolver that can load components lazily using system.js (1a0aea6)

SystemJSを使ったダイナミックなコンポーネントの読み込みをサポートするための仕組みが整いつつあります。

core: introduce support for animations (5e0f8cf), closes #8734

Animation APIが実装されました。詳しくは後述。

HTTP関連

http: Set response.ok (9234035), closes #6390 #6503
Request: Change Request.text’s return type to string (b2e0946), closes #8138
http: added withCredentials support (95af14b), closes #7281 #7281
http: automatically set request Content-Type header based on body type (0f0a8ad), closes #7310
http: implement Response.prototype.toString() to make for a nicer error message (89f6108), closes #7511
http: set the statusText property from the XMLHttpRequest instance (3019140), closes #4162

RequestOptions と BaseRequestOptions に withCredentials プロパティが追加されたことと、
post() や put() などの第2引数 body がany型となり、その型によって自動的にContent-Typeを設定してくれるようになったのが重要です。
今までワークアラウンドで解決していた部分が不要になるでしょう。

ルーター関連

Router v3が出ていますのでRC.2に含まれているルーター関連のコミットはほとんど意味ないです。

router: Added pushState fallback for IE 9 browser. (bab6023), closes #6506 #7929

ブラウザがPushStateに対応していない時のフォールバックが追加されました

パイプ・ディレクティブ関連

ngSwitch: use switchCase instead of switchWhen (#9076) (e1fcab7)

ngSwitchWhen が ngSwitchCase に改名されました。JavaScriptのswitch文と合わせた形です。

common: DatePipe supports ISO string (abc266f), closes #7794

これも私のPRです。
DatePipeが Date.fromISOString で受け入れ可能な ISO形式の文字列を許容するようになりました

common/datePipe: change date formatter to use correct pattern closes #7008 (#8154) (324f014), closes #7008 [(#8154](https://github.com/(/issues/8154)

DatePipeに渡すフォーマットが正しく動作するようになりました

NgTemplateOutlet: add context to NgTemplateOutlet (164a091), closes #9042

ngTemplateOutlet にcontext を渡せるようになりました

<template [ngTemplateOutlet]="templateRefExpression" [ngOutletContext]="objectExpression"></template>

Forms関連

Control: Support select multiple with Control class (#8069) (84f859d)
facade: change EventEmitter to be sync by default (#8761) (e5904f4)
forms: rename old forms folder to forms-deprecated (515a8e0)
forms: update accessor value when native select value changes (7a2ce7f), closes #8710
forms: update value and validity when controls are added (50acb96), closes #8826
forms: separate ngModelGroup from formGroupName (5c0cfde)
forms: add the submitted flag to NgForm and NgFormModel directives (420e83a), closes #2960 #7449
forms: allow ngModel to register with parent form (4ed6cf7)
forms: compose validator fns automatically if arrays (61960c5)
forms: support setting control name in ngModelOptions (a191e96)
forms: add easy way to switch between forms modules (22916bb)

@angular/common の中の Forms APIはすべて deprecatedになりました。
ngForm や ngModel などの基本的な機能はデフォルトで読み込まれるので気にする必要はありませんが、
FormBuilder などのモデルドリブンフォームのAPIは @angular/forms から読み込むようになっていきます。

機能的には、select要素がmultipleをサポートできるようになったことや、
ngModel を設定している時に ngControl を使わなくてよくなりました。
また、 ngForm や ngFormModelが submitted フラグを持つようになりました。

テスト・デバッグ関連

enableDebugTools: return ComponentRef (4086b49)

enableDebugTools が ComponentRef を返すようになったので、 bootstrap()の戻り値のPromiseの中で使いやすくなりました。

bootstrap(App)
  .then(enableDebugTools);
  .then(cmpRef => {
      ...
  });

testing: add discardPeriodicTasks to be used with fakeAsync (#8629) (0cb93a4), closes #8616

discardPeriodicTasks 関数が追加されました。 fakeAsync 中で残っているピリオディックなタスクを破棄します。

debug: collect styles and classes for the DebugElement (155b882)

DebugElement がstylesとclasssを持つようになりました。

セキュリティ関連

security: allow data: URLs for images and videos. (dd50124)
security: allow url(…) style values. (15ae710), closes #8514
security: Automatic XSRF handling. (4d793c4)
security: expose the safe value types. (50c9bed), closes #8568
security: support transform CSS functions for sanitization. (8b1b427), closes #8514
security: warn users when sanitizing in dev mode. (3e68b7e), closes #8522

ようやく落ち着きを見せてきたセキュリティ対応です。
data:image/png のような値が許可されたり、スタイルの url() 関数が許可されたり、CSS中の関数のバリデーションが緩和されたりしています。
また、ProdModeじゃない時にはセキュリティに引っかかったときにwarningメッセージが出てくるようになりました

アップグレード関連

upgrade: allow deeper nesting of ng2 components/directives (#8949) (48bf349)

ng2 > ng1 > ng2 のような複雑な入れ子構造で正しく動くようになります

upgrade: allow functions for template and templateUrl (#9022) (a19c4e8)

ng1側のディレクティブの template や templateUrl が関数の場合にその戻り値をテンプレートとして扱うようになりました

upgrade: Ensure upgrade adapter works on angular.js 1.2 (#8647) (cbc8d0a)
upgrade: make bindings available on $scope in controller & link function (#8645) (6cdc53c)

Angular 1.2に対応しました。 bindToController がないときにはディレクティブのcontroller関数やlink関数で $scope から
ng2 componentからのデータバインディングが可能になりました

upgrade: fallback to root ng2 injector when element is compiled outside the document (#86 (db82906)

ui-routerのように、ディレクティブを外部でコンパイルしたものをドキュメントに挿入した時に、
挿入されたディレクティブがルートのInjectorを参照するようにフォールバックが追加されました

その他

add minified bundles (9175a04)

各パッケージごとにbundleされたumd.jsが同梱されます

また、CHANGELOG以外にも公式ブログでのアナウンスもされているので一緒に紹介します。

RC2 Now Available

Animation APIのサポート

ついにAnimation APIが実装されました。ドキュメントも用意されています。

Animations - ts

このドキュメントはng-confでもAnimationを担当した@teropa氏によるものです。
gitアニメーション付きでわかりやすくてよいです。

Forms API

RC.2に新しいForms APIの一部が実装されています。オプトインになっているので試したい方は @angular/forms を使ってみましょう。

多くのプルリクエストの消化

100以上のPRがマージされ、多くのバグが修正され、大きく改善されました

Web Workerサポート

RCリリースの際に一度ドロップしていたWeb Workerサポートが完全復帰しました。

今後の予定

RCは今後もいくつか続き、最終的には2.0.0 Finalを目指していきます。
数ヶ月以内に辿り着きそうとのことで、FormsやRouterも含めて期待していきましょう。

いかがでしたでしょうか。
大きく変わったのはForms周りくらいで、あとはちょっと便利な機能が増えたりバグが直ったりと嬉しい変更ばかりです。
新しいForms APIに関してはまだ未完成なので今後も要チェックです。しばらくは今までどおりのAPIを使っていてもいいでしょう。
RC.3は来月以降とのことなのでゆっくり慣らしていけるはずです。

Router v3も細かい修正が重なっているので、落ち着いたところでまた変更点を紹介します。
それではまた。

Router v3と新しいForm APIについて

Fri, 10 Jun 2016 19:09:12 +0900

どうも、らこです。しばらく更新が止まってましたが、RC.2が近づいてきてそろそろ復活すると思います。

6/6のミーティングノートで、RC.2のリリース計画と、新しいRouterのリリースについて書かれました。

https://docs.google.com/document/d/150lerb1LmNLuau_a_EznPV1I1UHMTbEl61t4hZ7ZpS0/edit#heading=h.p095qktniiv3

どれも寝耳に水ではありますが、ここしばらく更新が緩やかだったのはこのために下準備をしていたということがわかってスッキリです。
ここからはミーティングノートの内容をひとつずつ見ていきます。

RC.2のリリースについて

RC.2のゴールは、Offline Template Compilerを使ってのコンパイルを可能にすることです。
ほとんど完成していますが、まだいくつかのissueが残っているので、それらが解決したところでRC.2のリリースとなります。

Form APIの刷新

いままで特に変更がなかった ngForm や ngModel, FormBuilder など、 @angular/common Form APIに、大きな変更が入ります。
担当はAngular Material2と同じKara Erickson氏で、鋭意作業中です。
まだ新しいAPIは完成していませんが、デザインドキュメントは公開されているので、どう変わるのかを先に知っておくことはできます

Forms Upcoming Change Proposal

基本的な方針は、Angular 1のようなテンプレートドリブンのAPIにすることです。
今までは ngModel を書いていても ngControl も併記しないといけなかったり、 ngForm や ngFormControl など混乱しがちなAPIが多くあったことが問題とされていて、
テンプレートドリブンで書きやすいような設計に書きなおされます。逆に、モデルドリブンなFormの組み立てはオプショナルな機能になってしまいます。

Router v3

Angular2公式のRouterが新しくリリースされ、ver3.0.0-alpha.3となりました。

リポジトリはこちら

angular/vladivostok

メインで開発しているのはお馴染みVictor Savkin氏です。
リポジトリの名前はウラジオストクですが、深い意味はありません。おそらくvictorsavkinから取られてるんじゃないかという気がします。

Question: why vladivostok? · Issue #31 · angular/vladivostok

we ran out of names for routers.

Beta Router( @angular/router-deprecated )をv1として、
RC Router( @angular/router@2.0.0-rc.1 )がv2になるのですが、そしてそれらを過去にするようやくまともなルーターが出てきました。
v1, v2からの反省を活かしつつ、 @ngrx/router や ui-router の思想を取り入れたv3を今後は使うことになります。

v2までの問題点と、v3を作るに至った経緯、基本思想は公式ブログで綴られています

Improvements Coming for Routing in Angular

Router v3の具体的な使い方はSavkin氏のブログにかかれています。私も触ってみたのでこちらで解説しています。

Angular Router | Victor Savkin

公式のドキュメントも2週間以内には公開するとのことです。

ng-confとGoogle I/Oが終わってから、Angular Teamはイベントから開放されてひたすらRCを成熟させるためにコードを書いてくれているようです。
Pull Requestも以前とは比較にならないほどスムーズにやりとりが進んで、マージされるハードルも低くなっているので、
RCを触っていて見つけたバグは積極的に報告し、PRを送ってみるといいんじゃないかと思います。

次はRC.2がリリースされたら変更点を紹介する予定です。それでは。

Angular 2 RCリリースについて

Mon, 09 May 2016 11:35:30 +0900

ng-confお疲れ様でした、らこです。
Angular 2もついにRelease Candidateとなりまして、最終リリースへのステップをまたひとつ進めたところです。
Betaから大きく変わっている部分もありますが基本的には機械的に対応可能な破壊的変更なので、さくっとRC対応していきましょう。

パッケージの変更

RCからはnpmで配布するパッケージ自体が変わりました。
今まではすべて angular2 パッケージの中にまとめられて配布されていましたが、今後は細かい単位でパッケージが分割されます。
古いangular2のモジュールと新しいパッケージの対応は以下のようになっています。

`angular2/***`	`@angular/***`
core	core
common	common
compiler	compiler
testing	core/testing, compiler/testing, platform-browser/testing,…
platform/browser	platform-browser, platform-browser-dynamic
platform/server	platform-server
platform/common	common
http	http
router	router-deprecated
alt_router	router
upgrade	upgrade

@angular/core というパッケージ名は、npmの scoped package という形式で、
「”angular” organizationの “core” パッケージ」という意味になります。
具体的には次のようなインストールコマンドを使います。

$ npm i @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic

パッケージは小分けになりましたが、各パッケージはpeer dependencyで依存しあっているので、
もし足りないパッケージがあったとしてもインストール後にwarningが発生して教えてくれます。

ところで、一部のAPI、AnimationBuilderやBrowserDomAdapterなどがパブリックなAPIから消滅しています。
内部的には存在していて、無理やり使用することはできますが、自己責任で。
おそらくRC以降に巻き込まれて一時的に隠れているだけだと思われます。

依存パッケージの変更

今までAngular 2はいくつかのpeer dependencyを持っていましたが、それが最小限のものだけになりました。
具体的には、es6-shimとreflect-metadataがpeer dependencyから削除されました。
これは依存しなくなったわけではなく、使用するpolyfillをユーザーに委ねるようにした、いわゆるポリシー変更です。
ES6機能のpolyfillには以前からcore-jsなど他のものを使うことができましたが、es6-shimをインストールしないとwarningがでるという状態だったので、
扱いやすい形に変わったといえます。

platform-browserとplatform-browser-dynamicの分割

従来通りランタイムでbootstrapする方式と、Offline Compilerを使ったstaticなbootstrap方式の両方をサポートするため、
ブラウザプラットフォーム用のパッケージが@angular/platform-browserと@angular/platform-browser-dynamicに分割されました。
元々angular2/platform/browserからexportされてたbootstrap関数は、@angular/platform-browser-dynamicに含まれています。

alt_routerがrouterに昇格

今までのangular2/routerモジュールは@angular/router-deprecatedパッケージとなり、
その名の通り過去のものになってしまいました。
そしてVictor Savkinが作りなおした新しいパッケージが@angular/routerとして配布されています。

しかしまだ@angular/routerは開発途上なので、旧routerから移行するには機能が足りていない場合があります。
既存のAngular 2アプリケーションはまだしばらく@angular/router-deprecatedでもよさそうです。

Beta.17まで順調についてきていればあとはパッケージ名の置換だけで済むはずなので、さくっとRC対応できるはずです。
RCも短いスパンでアップデートされていくのが目に見えているので、置いていかれないようにしていきましょう。

Angular Info

Angular 2.1.2/2.2.0-beta.1のリリース

Bug Fixes

compiler: walk third party modules (#12453) (a838aba), closes #11889 #12428

compiler: use Maps instead of objects in selector implementation (d321b0e)

compiler-cli: assert that all pipes and directives are declared by a module (7221632)

http: overwrite already set xsrf header (b4265e0)

router: canDeactivate guards are not triggered for componentless routes (b741853), closes #12375

router: change router not to deactivate aux routes when navigating from a componentless routes (52a853e)

router: disallow component routes with named outlets (8f2fa0f), closes #11208 #11082

router: preserve resolve data (6ccbfd4), closes #12306

その他

Code Refactoring

upgrade: re-export the new static upgrade APIs on new entry (a26dd28)

Features

router: export routerLinkActive w/ isActive property (c9f58cf)

記事紹介

その他

Angular 2.1.1/2.2.0-beta.0のリリース

Bug Fixes

Features

Angular 2.1.0のリリース

Bug Fixes

Features

Features

Bug Fixes

記事紹介

Angular 2.0.1/2.1.0-beta.0のリリース

ベータ版のインストール方法

2.0.1の修正点

2.1.0-beta.0の変更点

Features

Bug Fixes

記事・動画紹介

🎉✨ Angular 2.0.0がリリースされました 🎉✨

RC.6からの変更点

破壊的変更

依存パッケージの更新

修正されたバグ(抜粋)

Angularの今後

Semantic Versioningの導入

Angular 2の今後

Angular 1のサポートについて

AoTについて

AngularCLIについて

Angular 2 RC.6がリリースされました

破壊的変更

npmパッケージの構成の変更

zone.jsのアップデートにともなうtestingへの影響

SanitizationService/DomSanitizationServiceの改名

@Component.directives/pipesの完全廃止

アニメーション定義の非推奨なテンプレートシンタックスを廃止

非推奨なプロバイダー宣言を廃止

NgZoneErrorの廃止

非推奨なboostrap APIの廃止

ApplicationRef,PlatformRefの非推奨APIの廃止

非推奨な@Directive.properties/eventsの廃止

Query/ViewQueryの廃止

TestComponentBuilderの廃止

#シンタックスとvar-シンタックスの廃止

HTTP_PROVIDERSとJSONP_PROVIDERSの廃止

CACHED_TEMPLATE_PROVIDERの改名

NgSwitchWhenの廃止

ReplacePipeの廃止

UpgradeAdapter#addProviderの廃止

commonパッケージのForms APIの廃止

Web Worker関連APIのパッケージ分割

その他の変更

core

NO_ERRORS_SCHEMAの追加

Animation APIのイベントオブジェクトにtotalTimeを追加

compiler

compiler-cliのTypeScript 2.0対応

entryComponentsからdeclarationsへの自動的な適用を廃止

テンプレート中に未知の要素が存在することを検知し、エラーを発生させるようになった

:host,:host-contextの修正

common

DatePipeがfloat形式の文字列を受け取れるように修正

http

bodyが空の時にResponce#text()が空文字列を返すように修正

`SanitizationService`/`DomSanitizationService`の改名

`@Component.directives/pipes`の完全廃止

`NgZoneError`の廃止

`ApplicationRef`,`PlatformRef`の非推奨APIの廃止

非推奨な`@Directive.properties/events`の廃止

`Query`/`ViewQuery`の廃止

`TestComponentBuilder`の廃止

`#`シンタックスと`var-`シンタックスの廃止

`HTTP_PROVIDERS`と`JSONP_PROVIDERS`の廃止

`CACHED_TEMPLATE_PROVIDER`の改名

`NgSwitchWhen`の廃止

`ReplacePipe`の廃止

`UpgradeAdapter#addProvider`の廃止

`NO_ERRORS_SCHEMA`の追加

Animation APIのイベントオブジェクトに`totalTime`を追加

`entryComponents`から`declarations`への自動的な適用を廃止

`:host`,`:host-context`の修正

`DatePipe`がfloat形式の文字列を受け取れるように修正

bodyが空の時に`Responce#text()`が空文字列を返すように修正

`LOCALE_ID`の導入

`CurrencyPipe`,`DatePipe`,`NumberPipe`がロケールを参照するように変更

`RouterTestingModule.withRoutes`の追加

`NgModule`について

`Compiler`に関する変更

`ApplicationRef`に関する変更

`ApplicationRef#waitForAsyncInitializers`の廃止

`ApplicationRef.registerBootstrapListener`の廃止

`ApplicationRef#dispose`の廃止

`AplicationRef#registerDisposeListener`の廃止

`ApplicationRef#run`の廃止

`ApplicationRef#injector`の廃止

`ApplicationRef#zone`の廃止

`disposePlatform`の廃止

`coreLoadAndBootstrap`/`coreBootstrap`の廃止

RouteConfigと`declarations`に関する規定

`TestInjector`の廃止と`TestBed`の導入

`ngModel`の挙動の変更と、ユニットテストへの影響

`PLATFORM_PIPES`と`PLATFORM_DIRECTIVES`の廃止

`selector`を持たないコンポーネントを許容するように修正

Safe Operator(`?.`)の評価の挙動を修正

`CurrencyPipe`の規定の挙動の変更

`NumberPipe`がstring型を許容するようになった

`content-type`ヘッダの上書きをサポート

`arraybuffer`型と`blob`型のレスポンスをサポート

`RouterModule`の導入

`canActivateChild`/`canLoad`の追加

`RouterOutlet`のイベントを追加

`ActivateRoute`が`routeConfig`を返せるようになった

`queryParams`や`fragment`が`ActivateRoute`から取得するようになった

`NgForm#reset`の追加

multipleなselect要素で`change`イベントを使うように修正

コントロールに`invalid`/`pending`プロパティを追加