My angular2 application is currently working in both latest Chrome and Firefox.
Using gulp for my build process and systemjs for my module loading.
Trying to view the application in IE11 fails by displaying nothing 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 generic to me but any pointers on what to try next would be greatly appreciated.
So far I have checked the network tab to see requests and responses to make sure it actually is getting my app.module.js. It is correctly returning the app.module.js file as expected.
All requests in the network tab are successful and all return the files I expect.
I have searched around for any polyfills/shims I may need to get it working in IE11.
I have placed logging around the early parts of my app such as main.ts, app.module.ts but none 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);
