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

どうも、らこです。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

それではまた。

Menu

破壊的変更

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の廃止