Angular2 app not working in IE 11

Jaroslav Loutocký

unread,

Jun 22, 2016, 9:08:38 AM6/22/16

to AngularJS

I created application in Angular 2, now I am using RC1. I hoped that with core.js 2.4.0 (no shims for IE) will be everything fine with Internet explorer. But the app is still loading...

Here is console log from IE 11:

SCRIPT1010: Expected identifier
File: zone.js, Line: 648, Column: 37
SCRIPT1010: Expected identifier
File: Reflect.js, Line: 518, Column: 26
SCRIPT5022: Exception thrown and not caught
File: shim.min.js, Line: 7, Column: 6147

It is necessary to say, that everything works fine in IE on localhost, but on server it does not. I think about, that the address for localhost is http://localhost:8080/, but on server (with reverse proxy) ishttps://something.cz.something.com/zds/.

My index.html is:

<html>
<head>

    <!-- build:baseUrl -->
    <base href="/">
    <!-- endbuild -->

    <title></title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <link href="app/css/jquery-ui.css" rel="stylesheet">
    <link href="app/css/bootstrap.min.css" rel="stylesheet">
    <link href="app/css/font-awesome.min.css" rel="stylesheet">
    <link href="app/css/style.css" rel="stylesheet">
    <link href="app/css/bootstrap.login.css" rel="stylesheet">

    <!-- datetimepicker calendar-->
    <link rel="stylesheet" href="node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="node_modules/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <!--end datetimepicker calendar-->


    <!-- build:systemjs -->
    <script src='systemjs.config.js'></script><script>System.import('app').catch(function(err){ console.error(err); });</script>
    <!-- endbuild -->
</head>

<!-- 3. Display the application -->
<body>
    <zds>Loading...</zds>
</body>
</html>

Package.json

{
  "name": "zds-demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "gulp": "gulp",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "postinstall": "typings install"
  },

  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",

    "systemjs": "^0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6",    
    "moment": "~2.8",
    "jquery": ">=1.8.3 <2.2.0",
    "eonasdan-bootstrap-datetimepicker": "4.15.35",
    "express-history-api-fallback": "latest",
    "express": "latest"    
  },

  "devDependencies": {
    "browser-sync": "^2.12.5",
    "concurrently": "^2.0.0",
    "del": "1.1.1",
    "gulp": "latest",
    "gulp-compass": "latest",
    "gulp-copy": "latest",
    "gulp-html-replace": "^1.5.5",
    "gulp-rename": "latest",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "latest",
    "path": "latest",
    "run-sequence": "1.1.0",
    "typescript": "^1.8.10",
    "systemjs-builder": "^0.15.23",
    "typings": "^1.0.4"
  }
}

And the system config

var map = {

    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'ts/main.component.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

  var ngPackageNames = [ // <-----
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // 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: 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 = {
    map: map,
    packages: packages
  }
  System.config(config);

Message has been deleted

Daniel Cavanagh

unread,

Jun 27, 2016, 11:03:27 AM6/27/16

to AngularJS

I am seeing the same issue in ie9. have you found a work around?

Jaroslav Loutocký

unread,

Jun 27, 2016, 11:17:10 AM6/27/16

to AngularJS

No I do not. The app is running on Apache webserver and there is problem with IE. On localhost IE already works. My friend says, that it is some problem with Apache webserver. How about your app? Is it running in IE on localhost?

Dne pondělí 27. června 2016 17:03:27 UTC+2 Daniel Cavanagh napsal(a):

Black Jack

unread,

Jul 7, 2016, 12:36:21 PM7/7/16

to AngularJS

Hi group,

I am also experiencing the same issue. On the apache webserver, chrome and firefox works, but not for ie10. In localhost: chrome, firefox, and ie10 is working. I am using rc2 with similar setup as Jaroslav.

Steven Luke

unread,

Jul 7, 2016, 4:37:50 PM7/7/16

to AngularJS

You need the ES6 and ES5 shims for IE 11 (not sure if they work in older browsers, but they would be a minimum).

I have this in my index.html's head element:

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

You will need to install the es5-shim and es6-shim into your node_modules:

path to project > npm install es5-shim --save
path to project > npm install es6-shim --save

Or whatever manner you want to manage your JS packages.

Steve

Sander Elias

unread,

Jul 8, 2016, 3:43:47 AM7/8/16

to AngularJS

Hi Steven,

I get it you need the es6 shim, but es5? As far as I know IE9+ (aside from strict mode in ie9 itself) supports es5 out of the box? Or did I miss something?

Regards

Sander

Black Jack

unread,

Jul 21, 2016, 12:49:08 PM7/21/16

to AngularJS

Ok I solved my problem with crappy ie8 not working with angular2 in Apache. Turns out it is running in compatible mode. In local host this issue never arose till I clicked on the compatible button. In apache it serves the page with no compatible option.

Solution is to add <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> and it worked for me.

Reply all

Reply to author

Forward