System js syntax error, IE11

Question

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 1

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.

Thanks to this post and this post for getting me there.