My angular2 project is currently functioning smoothly in the latest versions of Chrome and Firefox.
I am using gulp for my build automation process and systemjs for module loading.
However, when I try to access the application in IE11, it fails to load and throws a syntax 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"
I find this error message quite generic and would appreciate any guidance on what steps to take next.
So far, I have inspected the network tab to verify the requests and responses, confirming that the app.module.js file is indeed being retrieved successfully.
All requests shown in the network tab are successful, returning the expected files.
I have also researched potential polyfills or shims that may be necessary to make the application compatible with IE11.
I placed logging statements at various points in my application, including main.ts and app.module.ts, but they do not appear to be triggered.
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';
...(remaining code truncated for brevity)...
export class AppModule { }
package.json
{
"name": "example",
"version": "0.0.0",
"private": true,
"scripts": {
...(remaining code truncated for brevity)...
},
"dependencies": {
...(remaining code truncated for brevity)...
},
"devDependencies": {
...(remaining code truncated for brevity)...
},
"engines": {
"node": "^4.5.0",
"npm": "^3.10.6"
}
}
systemjs.config.js
(function(global) {
...(content copied as is)...
})(this);