系统js语法错误,IE11



我有一个angular 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

但正如我所说,我还没有遇到萤火虫和铬的问题。

我浏览了一下互联网,发现了一些关于polyfill垫片的信息。。所以我试着在我的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中的网络控制台。

看起来有一个请求试图命中

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目标,我无法访问地图、承诺等…

我试着寻找一些解决这个问题的方法,比如添加这个

///<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>

这仍然不适用于我。我得到相同的原始语法错误。

查看我的主.ts文件

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

如果我评论掉第三行,网络控制台中的错误就会消失,但现在我的应用程序当然不会引导。

只是为了好玩,这是我的tsconfig.json

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

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

1) 我需要将tsconfig.json中的"目标"设置为"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 transfile步骤仍然有一个巨大的堆栈跟踪,比如这个

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上工作了。

感谢这篇文章和这篇文章让我到达那里。

最新更新