Angular8で開発したアプリケーションをIE11で動かすと、データの変更が画面に反映されない

Angular7 で開発し、稼働していたアプリケーションを、Angular8(8.0.1)にアップデートしたところ、IE11で動かしたときのみ、これまでと異なる動きをする様になりました。

具体的例)

  1. 一覧画面があって、登録されているデータが表示されている。データはAPIを呼び出し取得。
  2. 一覧で表示しているデータの新規作成画面に遷移し、画面からAPIを呼んでデータを1件登録。
  3. 一覧画面に戻った際に、登録したデータが表示される。

上記のように操作した場合、
Chrome×Angular8 または、IE11×Angular7 の組み合わせであれば、この様に正しい挙動をするのですが、IE11×Angular8の時は、登録したデータが表示されず、1.の状態の一覧が表示されたままになります。

こういった事象(データを登録・更新したのに結果が画面に反映されない事象)は同一アプリケーションの別機能でも同じ様に発生します。

3.で一覧に戻った際、期待した仕様通り、データを取得するためにAPIを呼ぶ動きをしているのですが、IEの開発者ツールで見てみると、APIで取得した結果ではなく、キャッシュを使っているように見受けられます。(なので更新したデータが画面上に反映されない?)

IE11でのみこの様な事象が発生する原因が分からず、どなたかご存じであれば教えて頂きたく・・・
また、対応方法も分かると大変助かります。

1 Like

Chromeで動きIE11で動かないとなると、polyfillが不足しているのではないかと思います。

プロジェクト内でng versionした結果と、src/polyfills.ts の中身を見せていただきたいです

1 Like

返信ありがとうございます。

問題自体は、API側のレスポンスヘッダー(Cache-Control)に no-cache 設定を入れることでIEにも無理やり対応させました。

ただ、上記対応ではちょっと違和感があるので、引き続きご知見を頂ければと思います。

以下、ng versionした結果です。

C:\git\mplace>ng version

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.1
… animations, cdk, common, compiler, compiler-cli, core, forms
… language-service, material, material-moment-adapter
… platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.800.3
@angular-devkit/build-angular 0.800.3
@angular-devkit/build-optimizer 0.800.3
@angular-devkit/build-webpack 0.800.3
@angular-devkit/core 8.0.3
@angular-devkit/schematics 8.0.3
@angular/cli 8.0.3
@angular/http 7.0.0
@ngtools/webpack 8.0.3
@schematics/angular 8.0.3
@schematics/update 0.800.3
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0

また、polyfils.ts の内容は以下です。

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
* BROWSER POLYFILLS
*/


/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

いろいろ調べてみたのですが、IE11だとAjaxのGETリクエストにキャッシュが効いてしまう挙動がたしかにあるようで、no-cacheや、URLにタイムスタンプのクエリパラメータを付けてリクエストのたびにURLを変えるように工夫するテクニックが必要そうです。polyfillは関係なさそうでした。

1 Like

調査頂きありがとうございました。

少なくともAngular5〜7では発生しない事象でしたが、取り敢えず回避できているので大丈夫です。

そもそもIE使うこと自体が微妙ですしね。。