系统js语法错误,IE11

时间:2017-02-08 18:49:46

标签: javascript angular internet-explorer systemjs polyfills

我有一个有角度的2应用程序在firefox和chrome内部工作,而不是内部(叹气)IE。基于我的堆栈跟踪,看起来我的System js设置存在问题。

以下是我在网络控制台中看到的错误说明。

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这个问题。

我在网上看了一下,发现了一些关于填充垫片的事情..所以我尝试在index.html中包含以下内容

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

我希望这可以快速修复,但看起来并非如此。有没有人对如何从这一点着手进行任何推荐?

编辑:

我在IE 11网络控制台中发现了404。

看起来请求正在尝试点击

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目标,详细内容为here。现在,当我尝试构建时,我得到了一大堆其他问题,this post可以很好地描述堆栈跟踪。

通过切换到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"                                                                                                                                                                                                
  ]                                                                                                                                                                                                                
}  

1 个答案:

答案 0 :(得分:7)

我终于明白了,这并不容易。我需要解决一些不同的问题。

1)我需要设置我的目标&#34;在tsconfig.json中,&#34; es5&#34;

{                                                                                                                                                                                                                  
  "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处有一个巨大的堆栈跟踪 - &gt; 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上工作了。

感谢this postthis post让我到那儿。