title: System js syntax error, IE11
body: <p>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.</p>
  
  <p>Here is the error description that I see inside my web console.</p>
  
  <pre><code>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
  </code></pre>
  
  <p>It looks like it cannot find my</p>
  
  <pre><code>app/app.module.js
  </code></pre>
  
  <p>But as I said, I have not had this issue with firefox and chrome.</p>
  
  <p>I looked around the internet a bit and found something about polyfill shims.. so I tried including the following in my index.html</p>
  
  <pre><code>&lt;script src="/node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/systemjs/dist/system-polyfills.src.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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? </p>
  
  <p>Edit :</p>
  
  <p>I have discovered a 404 that I am getting inside IE 11 web console.</p>
  
  <p>Looks like a request is attempting to hit</p>
  
  <pre><code>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
  </code></pre>
  
  <p>or Promise.js.map within the systemjs folder, and I don't have it there.</p>
  
  <p>So, a few new questions</p>
  
  <p>1) Why is this request not being made/not required in the other browsers that I have tried?</p>
  
  <p>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.</p>
  
  <p>I also noticed that after removing/commenting out</p>
  
  <pre><code>&lt;script src="/node_modules/systemjs/dist/system-polyfills.src.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Edit 2: </p>
  
  <p>I have tried switching my ES6 target, found in my tsconfig.json, to an ES5 target, as detailed <a href="https://stackoverflow.com/questions/39744951/ie11-issue-error-loading-app-module-js-as-app-module-from-main-js">here</a>. Now, when I try and build, I get a whole slew of other problems, the stack trace can be nicely described by <a href="https://stackoverflow.com/questions/33332394/angular-2-typescript-cant-find-names">this post</a>.</p>
  
  <p>By switching to ES5 target, I don't have access to Map, Promise, etc...</p>
  
  <p>I've tried looking at some of the fixes for that question, such as adding this</p>
  
  <pre><code>///&lt;reference path="node_modules/angular2/typings/browser.d.ts"/&gt;
  </code></pre>
  
  <p>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...</p>
  
  <p>edit 3: I've offered up a bounty for this. Recently, I've tried another shim.</p>
  
  <pre><code>&lt;script src="/node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This still isn't working for me. I get the same original Syntax error.</p>
  
  <p>Looking at my main.ts file</p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app.module';
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>If I comment out the 3rd line, the errors in the web console go away, but now of course my app doesn't bootstrap.</p>
  
  <p>Just for kicks, here is my tsconfig.json</p>
  
  <pre><code>{                                                                                                                                                                                                                  
    "compilerOptions": {                                                                                                                                                                                             
    "target": "es6",                                                                                                                                                                                               
    "module": "system",                                                                                                                                                                                            
    "moduleResolution": "node",                                                                                                                                                                                    
    "experimentalDecorators": true                                                                                                                                                                                 
  },                                                                                                                                                                                                               
    "exclude": [                                                                                                                                                                                                       
      "node_modules",                                                                                                                                                                                                
      "jspm_packages"                                                                                                                                                                                                
    ]                                                                                                                                                                                                                
  }  
  </code></pre>