LoginSignup
1
2

More than 5 years have passed since last update.

Angular2のIE9対応 Tips

Last updated at Posted at 2017-02-13

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対応は適応出来ませんでした。
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2