2017-05-25 21 views
0

初めてAngular 4アプリケーションを作成しましたが、ChromeとMozilla Firefoxでは正常に動作します。'WeakMap'はAngular 4とInternet Explorerで定義されていません

Internet Explorerのバージョンが10と11の両方で動作しません。

(SystemJS)ReferenceError: 'WeakMap'は定義されていません traspiled main.js.

これは、外部のJavaScriptライブラリとSystemJs構成に私の参照です:

<script src="https://unpkg.com/es6-shim"></script> 
<script src="https://unpkg.com/reflect-metadata"></script> 
<script src="https://unpkg.com/zone.js?main=browser"></script> 
<script src="https://unpkg.com/jquery"></script> 
<script src="https://unpkg.com/[email protected]/dist/system.js"></script> 
<script> 
    System.config({ 
     paths: { 
      'npm:': 'https://unpkg.com/' 
     }, 
     map: { 
      // angular bundles 
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', 
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 
      '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 
      'rxjs': 'npm:[email protected]', 
     }, 
     packages: { 
      '': { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
    System.import('main.js').catch(function (err) { console.error(err); }); 
</script> 

これはmain.tsファイルです:これは

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "outDir": "./Scripts" 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 
私tsconfig.json構成である

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 

import { AppModule } from './app.module'; 

enableProdMode(); 

platformBrowserDynamic().bootstrapModule(AppModule); 

私は明白ではないWeakMapを使用します。私はIE10でこの問題に遭遇してきた

import { NgModule, enableProdMode } from '@angular/core'; 
import { Component, ViewEncapsulation } from '@angular/core'; 
import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions, RequestOptionsArgs } from '@angular/http'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { FormsModule } from '@angular/forms'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import $ from 'jquery'; 

ありがとうございます

+0

'WeakMap'ではないようですこれはIE 10と11でサポートされています。好奇心のために、あなたのユースケースを「WeakMap」と共有できますか?あなたのアプリを別の方法でデザインすることも可能です。 – andreim

答えて

1

: は、私は、アプリケーションのファイル内部にのみ、このインポートを使用しています。それは私のためにIE11で動作します。とにかく、私はこのポリフィルを含み、少なくともページの作品 - にもかかわらず、徹底的にそれをテストしていない....

WeakMap Polyfill

https://github.com/Benvie/WeakMap

をスティーブ

+0

リンクがうまくいかない:-( – Drammy

+0

彼らは...削除されているはずです...。取り消されたWIPだったはずです:( – samneric

関連する問題