Zac*_*ack 8 javascript internet-explorer polyfills systemjs 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
但正如我所说,我没有使用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"
]
}
我终于得到了这个,这并不容易.我需要解决一些不同的问题.
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上工作了.