我想要记录一下在Angular2中支持IE9的必要条件。

Angular2版本

我将在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",
    }
}

必須的下位兼容模块

<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}])

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。

1. 無法使用動畫。使用Edge、FireFox、Chrome等瀏覽器時，需要進行以下URL的相應處理：

1. http://qiita.com/MakotoTaniguchi/items/a416b8b4fe3d0132e132

當替換component的模板（HTML）綁定對象時，將收到未定義的【Symbol.iterator】屬性錯誤。
因此，陣列等無法重新賦值，必須使用pop方法將其全部排出，然後再使用push方法等重新儲存。

如果升级版本的话

在升级到Angular4版本时，无法适应IE9的兼容性。