My angular2 app is angular2 running in both Chrome and Firefox.
Using gulp for my build process and systemjs to load my module.
An attempt to view the application in IE11 fails without displaying anything on the page and putting this error in the console:
"(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"
This error seems very common to me, but any pointers to try next will be greatly appreciated.
So far, I checked the network tab to see requests and responses to make sure that it really gets my app.module.js . It will correctly return the app.module.js file as expected.
All requests on the network tab are successful and all return the expected files.
I searched for any policies / gaskets that I might need to make it work in IE11.
I placed entries around the early parts of my application, such as main.ts , app.module.ts , but no one seems to be called.
index file
<!DOCTYPE html> <html> <head> <base href="/"> <title>Example</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css"/> <link rel="stylesheet" href="css/bootstraptheme/style.css"/> <link rel="stylesheet" href="css/style.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> <script src="css/bootstraptheme/homer.js"></script> <script src="lib/core-js/client/shim.min.js"></script> <script src="lib/es6-shim/es6-shim.min.js"></script> <script src="lib/systemjs/dist/system-polyfills.js"></script> <script src="lib/zone.js/dist/zone.js"></script> <script src="lib/reflect-metadata/Reflect.js"></script> <script src="lib/systemjs/dist/system.src.js"></script> <script src="lib/.tmp/Rx.js"></script> <script src="systemjs.config.js"></script> <script> conf = JSON.parse(decodeURIComponent("#{encodeURIComponent(JSON.stringify(conf))}")); System.import('app').catch(function(err) { console.error(err); }); </script> </head> <body> <my-app> Loading... </my-app> </body> </html>
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);
app.module.ts
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 { }
package.json
{ "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" } }
systemjs.config.js
(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);