System js syntax error, IE11
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.
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
It looks like it cannot find my
app/app.module.js
But as I said, I have not had this issue with firefox and chrome.
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?
Edit :
I have discovered a 404 that I am getting inside IE 11 web console.
Looks like a request is attempting to hit
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
or Promise.js.map within the systemjs folder, and I don't have it there.
So, a few new questions
1) Why is this request not being made/not required in the other browsers that I have tried?
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>
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.
Edit 2:
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.
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"/>
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: 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.
Looking at my main.ts file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
If I comment out the 3rd line, the errors in the web console go away, but now of course my app doesn't bootstrap.
Just for kicks, here is my tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "system",
"moduleResolution": "node",
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"jspm_packages"
]
}
Answer
I finally got this, it wasn't easy. I needed to fix a few different things.
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) I needed to include the correct shim in the index.html file
<script src="/node_modules/core-js/client/shim.min.js"></script>
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) Last step, I needed to explicitly include this reference
/// <reference path= "../node_modules/typescript/lib/lib.es6.d.ts" />
At the top of my app/main.ts file.
After doing these 3 steps and rebuilding the project, things finally started working on IE.