Angular 2 Application runs in Chrome but not IE 11

Question

Trying to start developing angular 2 applications. Found a video on YouTube and ran with it. It worked great, but only in Chrome. When I run the same application in IE 11, I get the following error:

Error: (SystemJS) Syntax error
SyntaxError: Syntax error
at Anonymous function (eval code:4:1)
at Anonymous function (eval code:1:31)
Evaluating http://localhost:52688/app/app.module.js
Evaluating http://localhost:52688/app/main.js
Error loading http://localhost:52688/app/main.js

So I go to google to find a solution. I've learned that IE 11 doesn't support es6, so I need to change my target framework in my tsconfig.json from es6 to es5. Obviously my application was not happy about this and it returns all sorts of errors along the lines of :

"Build:Cannot find name 'Map'" and "Build:Cannot find name 'Set'".

Again, off to google. I learned that these two objects are now totally different between es5 and es6 and many people suggested some shims. So I add a shim to my package.json, restore packages, and reference it in my main page. I try building again and I have no success.

I question whether these shims are actually working, but I'm not sure how else to make them 'work'. Thanks for your help. Here's all the relevant code. If you need more please let me know.

package.json

{"name": "angular2withvs2015",
"version": "1.0.0",
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"bootstrap": "3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.4.3",
"systemjs": "0.19.39",
"zone.js": "^0.6.25",
"es6-shim": "0.35.3"},
"devDependencies": {
"@types/core-js": "^0.9.41",
"@types/node": "6.0.40",
"gulp": "3.9.1",
"gulp-tsc": "^1.2.5",
"gulp-typescript": "^3.1.2",
"rimraf": "^2.5.4",
"typescript": "^2.0.7"}}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "types": []
  },
  "exclude": [
    "node_modules"
  ]
}

app.component.ts

import { Component,OnInit } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`,
    providers:[GetDataService]
})
export class AppComponent {
    name = 'Angular 2 (From component)';
}

system.config.js

(function (global) {
var map = {
    'app': '/app',
    '@angular': '/node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': '/node_modules/rxjs'

},
    packages = {
        'app': { main: './main.js', defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
    ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'forms'
    ];

function packUmd(pkgName) { packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' } }

ngPackageNames.forEach(packUmd);


var config = {
    map: map,
    packages: packages
};

System.config(config);})(this);

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Angular2Demo10.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">    
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/core-js/client/shim.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="system.config.js"></script>
<script>
    System.import('app').then(null, console.error.bind(console));
</script>
</head>
<body>
    <h1>Hello World (Default.aspx)</h1>
    <my-app>Loading...</my-app>
</body></html>

https://stackoverflow.com/questions/33332394/angular-2-typescript-cant-find-names — A. Tim, Oct 13 '17 at 20:07
I have no idea what this means. Can you simplify it at all? I'm assuming I need to change things in my package.json but I'm not sure what. — yarz-tech, Oct 13 '17 at 20:13
There are bunch of solutions. Just spend some time and try few of them... You can add `///` to main file, or try to add dependency for `@types/es6-shim` in your `package.json` — A. Tim, Oct 13 '17 at 20:18
Got it to work following Jiayi Hu's answer! Thanks for the reference Tim! — yarz-tech, Oct 13 '17 at 20:19

yarz-tech · Accepted Answer · 2019-02-12T15:13:26.840

Changed my tsconfig.json to:

{"compilerOptions": {
"lib": [ "es5", "dom", "es6", "dom.iterable", "scripthost" ],
"noLib": false,
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"types": ["node"]},
 "exclude": [
"node_modules"
]

Also, be sure to add both of these references into your index.html.

<script src="node_modules/es5-shim/es5-shim.js"></script>
<script src="node_modules/es6-shim/es6-shim.js"></script>

Sources: https://groups.google.com/forum/#!topic/angular/rR4GTRMUNsw --Steven Luke Angular and Typescript: Can't find names --Jiayi Hu

don't you mean your tsconfig.json? – OzzyTheGiant Feb 11 '19 at 22:02 — OzzyTheGiant, Feb 11 '19 at 22:02

Angular 2 Application runs in Chrome but not IE 11

1 Answers1