系統js語法錯誤，IE11

Question

我有一個角度2應用程序在firefox和chrome內部工作，而不是內部（嘆氣）IE。 基於我的堆棧跟蹤，看起來我的System js設置存在問題。

以下是我在Web控制台中看到的錯誤說明。

Error: (SystemJS) Syntax error
SyntaxError: Syntax error
   at ZoneDelegate.prototype.invoke (http://localhost:8050/node_modules/zone.js/dist/zone.js:230:13)
   at Zone.prototype.run (http://localhost:8050/node_modules/zone.js/dist/zone.js:114:17)
   at Anonymous function (http://localhost:8050/node_modules/zone.js/dist/zone.js:502:17)
Evaluating http://localhost:8050/app/app.module.js
Error loading http://localhost:8050/app/app.module.js as "./app.module" from http://localhost:8050/app/main.js

看起來好像找不到我的

app/app.module.js

但正如我所說，我沒有使用firefox和chrome這個問題。

我在網上看了一下，發現了一些關於polyfill shims的東西..所以我嘗試在index.html中包含以下內容

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.src.js"></script>

我希望這可以快速修復，但看起來並非如此。 有沒有人對如何從這一點着手進行任何推薦？

編輯：

我發現了一個404，我進入IE 11 Web控制台。

看起來請求正在嘗試命中

URL Protocol    Method  Result  Type    Received    Taken   Initiator   Wait‎‎  Start‎‎ Request‎‎   Response‎‎  Cache read‎‎    Gap‎‎
/node_modules/systemjs/dist/Promise.js.map  HTTP    GET 404 text/html   210 B   16 ms   XMLHttpRequest  140 0   16  0   0   5266

或者在systemjs文件夾中的Promise.js.map，我沒有它。

所以，一些新的問題

1）為什么在我嘗試過的其他瀏覽器中沒有提出/不要求此請求？

2）這個文件做了什么，我從哪里得到它？ 我仍然不確定在抓住這個之后我的語法錯誤是否會清楚，但它似乎是一個合理的起點。

我也注意到刪除/評論后

<script src="/node_modules/systemjs/dist/system-polyfills.src.js"></script>

Promise.js.map的請求不再生成。 所以我不確定polyfil到底做了什么，但它似乎引入了這個導致404的請求。

編輯2：

我已經嘗試將我的tsconfig.json中找到的ES6目標切換到ES5目標，詳見此處 。 現在，當我嘗試構建時，我得到了一大堆其他問題， 這篇文章可以很好地描述堆棧跟蹤。

通過切換到ES5目標，我無法訪問Map，Promise等...

我已經嘗試查看該問題的一些修復，例如添加此問題

///<reference path="node_modules/angular2/typings/browser.d.ts"/>

到我的main.ts文件的頂部，但我沒有angular2文件夾，我有一個@angular文件夾。 並且無法找到打字目錄。 我正在使用gradle構建/部署這個東西，所以我無法將npm安裝到我的本地計算機並且每天調用它...

編輯3：我已經為此提供了賞金。 最近，我嘗試了另一個墊片。

<script src="/node_modules/core-js/client/shim.min.js"></script>

這仍然不適合我。 我得到了相同的原始語法錯誤。

看着我的main.ts文件

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

如果我注釋掉第3行，Web控制台中的錯誤就會消失，但現在我的應用程序當然沒有引導。

只是為了踢，這是我的tsconfig.json

{                                                                                                                                                                                                                  
  "compilerOptions": {                                                                                                                                                                                             
  "target": "es6",                                                                                                                                                                                               
  "module": "system",                                                                                                                                                                                            
  "moduleResolution": "node",                                                                                                                                                                                    
  "experimentalDecorators": true                                                                                                                                                                                 
},                                                                                                                                                                                                               
  "exclude": [                                                                                                                                                                                                       
    "node_modules",                                                                                                                                                                                                
    "jspm_packages"                                                                                                                                                                                                
  ]                                                                                                                                                                                                                
}  

Answer 1

我終於得到了這個，這並不容易。 我需要解決一些不同的問題。

1）我需要將tsconfig.json中的“target”設置為“es5”

{                                                                                                                                                                                                                  
  "compilerOptions": {                                                                                                                                                                                             
      "target": "es6",       ==>    "target" : "es5",                                                                                                                                                                                           
      "module": "system",                                                                                                                                                                                            
      "moduleResolution": "node",                                                                                                                                                                                    
      "experimentalDecorators": true                                                                                                                                                                                 
  },                                                                                                                                                                                                               
  "exclude": [                                                                                                                                                                                                       
      "node_modules",                                                                                                                                                                                                
      "jspm_packages"                                                                                                                                                                                                
  ]                                                                                                                                                                                                                
}

2）我需要在index.html文件中包含正確的填充程序

<script src="/node_modules/core-js/client/shim.min.js"></script>

在完成這兩件事之后，我仍然在TS - > JS構建過程中的一個轉換步驟中有一個巨大的堆棧跟蹤，有這樣的東西

node_modules/rxjs/operator/toPromise.d.ts(7,59): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(7,69): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(9,9): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Promise'.

3）最后一步，我需要明確包含這個參考

/// <reference path= "../node_modules/typescript/lib/lib.es6.d.ts" />

在我的app / main.ts文件的頂部。

完成這3個步驟並重建項目后，事情終於開始在IE上工作了。

感謝這篇文章和這篇文章讓我在那里。