系统js语法错误,IE11
System js syntax error, IE11
我有一个 angular 2 应用程序在 firefox 和 chrome 中运行,而不是在(叹息)IE 中运行。根据我的堆栈跟踪,我的系统 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 垫片的东西..所以我尝试在我的 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
或 Promise.js.map 在 systemjs 文件夹中,但我没有。
那么,几个新问题
1) 为什么在我尝试过的其他浏览器中 made/not 不需要此请求?
2) 这个文件有什么作用,我从哪里得到它?我仍然不确定抓住它后我的语法错误是否会清除,但这似乎是一个合理的起点。
我也注意到 removing/commenting out
<script src="/node_modules/systemjs/dist/system-polyfills.src.js"></script>
不再向 Promise.js.map 发出请求。所以我不确定 polyfil 到底做了什么,但它似乎引入了导致 404.
的请求
编辑 2:
我已经尝试将在 tsconfig.json 中找到的 ES6 目标切换到 ES5 目标,详见 . Now, when I try and build, I get a whole slew of other problems, the stack trace can be nicely described by 。
通过切换到 ES5 目标,我无法访问 Map、Promise 等...
我已经尝试查看该问题的一些修复方法,例如添加这个
///<reference path="node_modules/angular2/typings/browser.d.ts"/>
到我的 main.ts 文件的顶部,但我没有 angular2 文件夹,而是有一个 @angular 文件夹。并且找不到 typings 目录。我是 building/deploying 这个东西 gradle,所以我将无法将 npm install typings 到我的本地机器并结束它...
编辑 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 控制台中的错误就会消失,但现在我的应用程序当然不会 bootstrap。
只是为了好玩,这是我的 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 文件中包含正确的 shim
<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 上运行了。
感谢 and this post 让我到达那里。
我有一个 angular 2 应用程序在 firefox 和 chrome 中运行,而不是在(叹息)IE 中运行。根据我的堆栈跟踪,我的系统 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 垫片的东西..所以我尝试在我的 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
或 Promise.js.map 在 systemjs 文件夹中,但我没有。
那么,几个新问题
1) 为什么在我尝试过的其他浏览器中 made/not 不需要此请求?
2) 这个文件有什么作用,我从哪里得到它?我仍然不确定抓住它后我的语法错误是否会清除,但这似乎是一个合理的起点。
我也注意到 removing/commenting out
<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 文件夹。并且找不到 typings 目录。我是 building/deploying 这个东西 gradle,所以我将无法将 npm install typings 到我的本地机器并结束它...
编辑 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 控制台中的错误就会消失,但现在我的应用程序当然不会 bootstrap。
只是为了好玩,这是我的 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 文件中包含正确的 shim
<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 上运行了。
感谢