系统js语法错误，IE11 [英] System js syntax error, IE11
问题描述
我在firefox和chrome中有一个angular 2应用程序，而在IE中没那么多.根据我的堆栈跟踪，看来我的System js设置有问题.
I've got an angular 2 app working inside firefox and chrome, not so much inside (sigh) IE. Based on my stack trace, it looks like there is a problem with my System js setup.
这是我在Web控制台中看到的错误说明.
Here is the error description that I see inside my web console.
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并没有这个问题.
But as I said, I have not had this issue with firefox and chrome.
我环视了一下互联网，发现了一些关于polyfill垫片的东西.所以我尝试在index.html中包含以下内容
I looked around the internet a bit and found something about polyfill shims.. so I tried including the following in my index.html
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.src.js"></script>
我希望这将允许快速修复，但事实并非如此.从这一点出发，有人对如何进行有何建议?
I was hoping this would allow a quick fix, but it looks like this is not the case. Does anyone have any recomendations on how to proceed from this point?
我发现我正在IE 11 Web控制台中找到一个404.
I have discovered a 404 that I am getting inside IE 11 web console.
好像请求正在尝试
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，但我在那里没有.
or Promise.js.map within the systemjs folder, and I don't have it there.
所以，有几个新问题
1)为什么在我尝试过的其他浏览器中没有/不需要此请求?
1) Why is this request not being made/not required in the other browsers that I have tried?
2)该文件做什么，我在哪里得到它?我仍然不确定在抓住这些语法后是否会清除语法错误，但这似乎是一个合理的起点.
2) What does this file do, where do I get it? I'm still not sure if my syntax errors will clear after grabbing this, but it seems like a reasonable place to start.
我还注意到删除/注释后
I also noticed that after removing/commenting out
<script src="/node_modules/systemjs/dist/system-polyfills.src.js"></script>
不再向Promise.js.map发出请求.因此，我不确定polyfil到底能做什么，但是似乎引入了导致404的请求.
The request to Promise.js.map is no longer being made. So I'm not sure what the polyfil does exactly, but it seems to introduce this request that is resulting in a 404.
我尝试将在tsconfig.json中找到的ES6目标切换到ES5目标，详细信息此信息.
I have tried switching my ES6 target, found in my tsconfig.json, to an ES5 target, as detailed here. Now, when I try and build, I get a whole slew of other problems, the stack trace can be nicely described by this post.
通过切换到ES5目标，我无权访问Map，Promise等...
By switching to ES5 target, I don't have access to Map, Promise, etc...
我尝试查看该问题的一些修复方法，例如添加此
I've tried looking at some of the fixes for that question, such as adding this
///<reference path="node_modules/angular2/typings/browser.d.ts"/>
到我的main.ts文件的顶部，但是我没有angular2文件夹，而是一个@angular文件夹.打字目录在哪里都找不到.我正在使用gradle构建/部署此东西，因此我将无法npm将键入内容安装到本地计算机上并每天调用它.
to the top of my main.ts file, but I don't have an angular2 folder, I instead have an @angular folder. And the typings directory is nowhere to be found. I am building/deploying this thing with gradle, so I will not be able to npm install typings to my local machine and call it a day...
edit 3:我为此提供了赏金.最近，我尝试了另一个垫片.
edit 3: I've offered up a bounty for this. Recently, I've tried another shim.
<script src="/node_modules/core-js/client/shim.min.js"></script>
这仍然对我不起作用.我收到相同的原始语法错误.
This still isn't working for me. I get the same original Syntax error.
查看我的main.ts文件
Looking at my main.ts file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
如果我在第三行注释掉，Web控制台中的错误就会消失，但是现在我的应用程序不会启动.
If I comment out the 3rd line, the errors in the web console go away, but now of course my app doesn't bootstrap.
只为踢球，这是我的tsconfig.json
Just for kicks, here is my tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "system",
"moduleResolution": "node",
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"jspm_packages"
]
}
推荐答案
我终于明白了，这并不容易.我需要修复一些不同的东西.
I finally got this, it wasn't easy. I needed to fix a few different things.
1)我需要将tsconfig.json中的目标"设置为"es5"
1) I needed to set my "target" in the tsconfig.json to "es5"
{
"compilerOptions": {
"target": "es6", ==> "target" : "es5",
"module": "system",
"moduleResolution": "node",
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"jspm_packages"
]
}
2)我需要在index.html文件中包含正确的填充片
2) I needed to include the correct shim in the index.html file
<script src="/node_modules/core-js/client/shim.min.js"></script>
完成这两项操作后，在构建过程中的TS-> JS转译步骤中，我仍然拥有巨大的堆栈跟踪，像这样的东西
After doing these 2 things, I still had a huge stack trace at the TS -> JS transpile step in my build process, with stuff like this
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)最后一步，我需要明确包含此参考资料
3) Last step, I needed to explicitly include this reference
/// <reference path= "../node_modules/typescript/lib/lib.es6.d.ts" />
在我的app/main.ts文件顶部.
At the top of my app/main.ts file.
完成这三个步骤并重建项目后，事情终于开始在IE上运行.
After doing these 3 steps and rebuilding the project, things finally started working on IE.
Thanks to this post and this post for getting me there.
这篇关于系统js语法错误，IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
