title: IE11 Issue: Error loading app.module.js as ./app.module from main.js
body: <p>My <code>angular2</code> application is currently working in both latest Chrome and Firefox.</p>
  
  <p>Using gulp for my build <code>process</code> and <code>systemjs</code> for my module loading.</p>
  
  <p>Trying to view the application in <code>IE11</code> fails by displaying nothing on the page and putting this error in the console:</p>
  
  <pre><code>"(SystemJS) Syntax error
      SyntaxError: Syntax error
         at ZoneDelegate.prototype.invoke (localhost:3000/lib/zone.js/dist/zone.js:201:13)
         at Zone.prototype.run (localhost:3000/lib/zone.js/dist/zone.js:96:17)
         at Anonymous function (localhost:3000/lib/zone.js/dist/zone.js:462:17)
      Evaluating localhost:3000/app/app.module.js
      Error loading localhost:3000/app/app.module.js as "./app.module" from localhost:3000/app/main.js"
  </code></pre>
  
  <p>This error seems very generic to me but any pointers on what to try next would be greatly appreciated.</p>
  
  <p>So far I have checked the network tab to see requests and responses to make sure it actually is getting my <code>app.module.js</code>. It is correctly returning the <code>app.module.js</code> file as expected.</p>
  
  <p>All requests in the network tab are successful and all return the files I expect.</p>
  
  <p>I have searched around for any polyfills/shims I may need to get it working in IE11.</p>
  
  <p>I have placed logging around the early parts of my app such as <code>main.ts</code>, <code>app.module.ts</code> but none seems to be called.</p>
  
  <p>Index File</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;base href="/"&gt;
        &lt;title&gt;Example&lt;/title&gt;
        &lt;meta charset="UTF-8"/&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
            &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
              &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/&gt;
                &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css"/&gt;
                  &lt;link rel="stylesheet" href="css/bootstraptheme/style.css"/&gt;
                    &lt;link rel="stylesheet" href="css/style.css"/&gt;
                      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
                      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
                      &lt;script src="css/bootstraptheme/homer.js"&gt;&lt;/script&gt;
                      &lt;script src="lib/core-js/client/shim.min.js"&gt;&lt;/script&gt;
                      &lt;script src="lib/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
                      &lt;script src="lib/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
                      &lt;script src="lib/zone.js/dist/zone.js"&gt;&lt;/script&gt;
                      &lt;script src="lib/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
                      &lt;script src="lib/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
                      &lt;script src="lib/.tmp/Rx.js"&gt;&lt;/script&gt;
                      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
                      &lt;script&gt;
                        conf = JSON.parse(decodeURIComponent("#{encodeURIComponent(JSON.stringify(conf))}"));
                        System.import('app').catch(function(err) { console.error(err); });
                      &lt;/script&gt;
                    &lt;/head&gt;
    &lt;body&gt;
      &lt;my-app&gt;
        Loading...
      &lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.ts</p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app.module';
  
  const platform = platformBrowserDynamic();
  platform.bootstrapModule(AppModule);
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule }   from '@angular/forms';
  import { HttpModule, JsonpModule } from '@angular/http';
  
  import { ModalModule } from 'angular2-modal';
  import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
  
  import { Ng2CompleterModule } from "ng2-completer";
  import { TooltipModule } from "ng2-tooltip";
  import { DndModule } from 'ng2-dnd';
  
  import { routing } from './app.routing';
  
  import { CompanyService } from './services/company.service';
  import { LocationService } from './services/location.service';
  import { AppComponent }  from './app.component';
  import { ReportsComponent }  from './reports/reports.component';
  import { CalendarComponent }  from './calendar/calendar.component';
  import { CalendarFilter }  from './calendar/calendar.filter.component';
  import { DatePicker, ModalContentBase, Dropdown }  from './sharedComponents/index';
  import { LoginComponent }  from './login/login.component';
  import { SetDatesModalWindow }  from './calendar/dialogs/set-dates-modal';
  import { ViewCalendarDetailsModalWindow }  from './calendar/dialogs/view-calendar-details-modal';
  
  @NgModule({
  imports:
  [
  BrowserModule,
  FormsModule,
  routing,
  HttpModule,
  JsonpModule,
  ModalModule.forRoot(),
  BootstrapModalModule,
  Ng2CompleterModule,
  TooltipModule,
  DndModule.forRoot()
  ],
  exports: [DndModule],
  declarations:
  [
  AppComponent,
  ReportsComponent,
  LoginComponent,
  CalendarComponent,
  CalendarFilter,
  DatePicker,
  ModalContentBase,
  Dropdown,
  SetDatesModalWindow,
  ViewCalendarDetailsModalWindow
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA ],
  providers:    [ CompanyService, LocationService ],
  bootstrap:    [ AppComponent ],
  entryComponents: [ SetDatesModalWindow, ViewCalendarDetailsModalWindow ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
  "name": "example",
  "version": "0.0.0",
  "private": true,
  "scripts": {
  "clean": "gulp clean",
  "compile": "gulp compile",
  "build": "gulp build",
  "start": "concurrent --kill-others \"gulp watch\" \"node ./bin/www\"",
  "postinstall": "typings install"
  },
  "dependencies": {
  "@angular/common": "2.0.0",
  "@angular/compiler": "2.0.0",
  "@angular/core": "2.0.0",
  "@angular/forms": "2.0.0",
  "@angular/http": "2.0.0",
  "@angular/platform-browser": "2.0.0",
  "@angular/platform-browser-dynamic": "2.0.0",
  "@angular/router": "3.0.0",
  "@angular/upgrade": "2.0.0",
  "angular2-fontawesome": "^0.5.1",
  "angular2-in-memory-web-api": "0.0.20",
  "angular2-modal": "^2.0.0-beta.13",
  "body-parser": "~1.13.2",
  "bootstrap-datepicker": "^1.6.4",
  "bootstrap-timepicker": "^0.5.2",
  "cookie-parser": "~1.3.5",
  "debug": "~2.2.0",
  "es6-shim": "^0.35.1",
  "gulp-concat": "^2.6.0",
  "js-yaml": "^3.4.3",
  "lodash": "^4.15.0",
  "morgan": "~1.6.1",
  "ng2-completer": "^0.1.10",
  "ng2-dnd": "2.0.1",
  "ng2-tooltip": "0.0.3",
  "serve-favicon": "~2.3.0"
  },
  "devDependencies": {
  "express": "~4.13.1",
  "concurrently": "^2.0.0",
  "core-js": "^2.4.1",
  "del": "^2.2.0",
  "font-awesome": "^4.6.3",
  "gulp": "^3.9.1",
  "gulp-inline-ng2-template": "^3.0.1",
  "gulp-sourcemaps": "^1.6.0",
  "gulp-tslint": "^4.3.3",
  "gulp-typescript": "^2.12.0",
  "jade": "^1.11.0",
  "jadeify": "^4.4.0",
  "reflect-metadata": "^0.1.3",
  "rxjs": "5.0.0-beta.12",
  "systemjs": "0.19.39",
  "systemjs-builder": "^0.15.17",
  "systemjs-plugin-text": "0.0.9",
  "tslint": "^3.5.0",
  "typescript": "^2.0.2",
  "typings": "^1.3.2",
  "yargs": "^4.7.1",
  "zone.js": "^0.6.23"
  },
  "engines": {
  "node": "^4.5.0",
  "npm": "^3.10.6"
  }
  }
  </code></pre>
  
  <p>systemjs.config.js</p>
  
  <pre><code>(function(global) {
  var angular2ModalVer = '@1.1.5';
  var plugin = 'bootstrap';
  // map tells the System loader where to look for things
  var paths = {
  // paths serve as alias
  'npm:': 'lib/'
  }
  var map = {
  'app':                        'app',
  '@angular':                   'npm:@angular',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  'moment':                     'npm:moment/moment.js',
  'ng2-dnd':                    'npm:ng2-dnd',
  'angular2-modal':             'https://unpkg.com/angular2-modal' + angular2ModalVer,
  'lodash':                     'npm:lodash',
  'font-awesome':               'npm:font-awesome',
  'ng2-completer':              'npm:ng2-completer/bundles',
  'ng2-tooltip':                'npm:ng2-tooltip'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
  'app':                        { main: 'main.js',  defaultExtension: 'js' },
  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  'ng2-dnd':                    { main: 'index.js',  defaultExtension: 'js' },
  'angular2-modal':             { defaultExtension: 'js', main: 'bundles/angular2-modal.umd' },
  'lodash':                     {main:'index.js', defaultExtension:'js'},
  'font-awesome':               { main: 'font-awesome.min.css', defaultExtension: 'css' },
  'ng2-completer':              { main: 'ng2-completer.js',  defaultExtension: 'js' , format: 'cjs' },
  'ng2-tooltip':                { main: 'index.js', defaultExtension: 'js'}
  };
  var ngPackageNames = [
  'common',
  'compiler',
  'core',
  'forms',
  'http',
  'platform-browser',
  'platform-browser-dynamic',
  'router',
  'router-deprecated',
  'upgrade'
  ];
  
  map["angular2-modal/plugins/bootstrap"] = map['angular2-modal'] + '/bundles';
  packages["angular2-modal/plugins/bootstrap"] =  { defaultExtension: 'js', main: "angular2-modal.bootstrap.umd" };
  
  // Individual files (~300 requests):
  function packIndex(pkgName) {
  packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
  packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
  paths: paths,
  map: map,
  packages: packages
  };
  System.config(config);
  
  })(this);
  </code></pre>