Angular2のIE9対応 Tips

Angular2でIE9対応をするにあたって何が必要になるかを記載したいと思います。

Angular2のバージョン

package.jsonで定義しているバージョンで記載します

package.json

{
    "dependencies": {
        "@angular/common": "~2.2.0",
        "@angular/compiler": "~2.2.0",
        "@angular/core": "~2.2.0",
        "@angular/forms": "~2.2.0",
        "@angular/http": "~2.2.0",
        "@angular/platform-browser": "~2.2.0",
        "@angular/platform-browser-dynamic": "~2.2.0",
        "@angular/router": "~3.2.0",
    }
}

必須になる下位互換のモジュール

sample.html

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>

ルーティング周りで必要な実装

IE9ではpushStateが対応していないのでルーティングが上手く対応出来ません。
そこでhashStateを使用したルーティングを行わなければいけません。
キモになるのは{useHash: true}になります
オプションの意味は下記公式ドキュメントのURLに記載されています
https://angular.io/docs/ts/latest/api/router/index/ExtraOptions-interface.html

キモになる箇所

RouterModule.forRoot(appRoutes, {useHash: true}])

sample.routing.ts

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

const appRoutes: Routes = [
  { path: '', redirectTo: 'sample', pathMatch: 'full' },
  { path:'sample', loadChildren:'./app/routing/sample_child.routing.js#AppChildRouteModule' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {useHash: true})
  ],
  exports:[
    RouterModule
  ]
})
export class AppRouteModule {
}

IE9対応を行う上でのデメリット

1. URLがHashStateになるのでルートディレクトリが【localhost:8080/#/app】といったURLになってしまいます。
2. アニメーションが使えません。EdgeやFireFox,Chrome等で使用する際は下記URLの対応が必要となります
   　 http://qiita.com/MakotoTaniguchi/items/a416b8b4fe3d0132e132
3. componentのtemplate(HTML)にバインドするオブジェクトを上書きすると【Symbol.iterator】プロパティが未定義とお𠮟りを受けます。
   よって配列等は再代入出来ないのでpopメソッドで全部吐き出してからpushメソッド等で再格納しないといけないです。

バージョンアップした場合

1. Angular4にバージョンを上げた際にはIE9対応は適応出来ませんでした。