Angular2's (click) events doesn't work on IE 9

[skamlet]

The (click) event doesn't seem to work with a project generated with 'Aspnetcore Spa' generator.
=> can be tested on the "Counter" page

Though creating a "normal" node project (following the instructions from the Angular2's quick start) doesn't cause this problem.

Tested on IE 9 on Windows 7

[laskoviymishka]

This should be addressed to angular2 team. I think there is only IE 10 support from box. Everything else require polyphils or god helps. For IE 9 i assume that only god could help you.

[skamlet]

Thing is, with a freshly created angular 2 project running on node, I don't have this problem... But yeah, for IE 9 i'll also assume god is the only help :P...

[laskoviymishka]

What does console say? Are you add polyphill? Can you provide more details about what difference between those 2 projects? Webpack config etc.
And pray to any god you know. It also may help you 🚢

[MarkPieszak]

Angular2 should work on IE9 (but I believe the latest RC broke some IE9 support)

Do you have es6-shim or better yet, core-js shim?
You might need to wait for the next rc to hopefully have the fixes in.

[skamlet]

@MarkPieszak I tried with both, no success.

@laskoviymishka:

The NOT working project is using:

webpack.config.vendor.js:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = {
    resolve: {
        extensions: [ '', '.js' ]
    },
    module: {
        loaders: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            { test: /\.css/, loader: extractCSS.extract(['css']) }
        ]
    },
    entry: {
        vendor: [
            'bootstrap',
            'bootstrap/dist/css/bootstrap.css',
            'style-loader',
            'jquery',
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@angular/platform-server',
        ]
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        filename: '[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        extractCSS,
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ].concat(isDevelopment ? [] : [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            minimize: true,
            mangle: false // Due to https://github.com/angular/angular/issues/6678
        })
    ])
};

TSD: (also tried code-js here)

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "requirejs/require.d.ts": {
      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
    },
    "es6-shim/es6-shim.d.ts": {
      "commit": "c0d876601e0f8236fd6b57626eb62c4e485f1563"
    }
  }
}

package.json (I also tried with rc4 versions for each of the angular dependencies)

{
  "name": "Angular2ASP",
  "version": "0.0.0",
  "devDependencies": {
    "bootstrap": "^3.3.6",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "extendify": "^1.0.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jquery": "^2.2.1",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.0",
    "ts-loader": "^0.8.1",
    "typescript": "^1.8.2",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-hot-middleware": "^2.10.0"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.3", 
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/platform-server": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.8",
    "angular2-universal": "^0.104.1",
    "aspnet-prerendering": "^1.0.2",
    "aspnet-webpack": "^1.0.1",
    "css": "^2.2.1",
    "isomorphic-fetch": "^2.2.1",
    "preboot": "^2.0.10",
    "rxjs": "5.0.0-beta.6",
    "webpack-externals-plugin": "^1.0.0",
    "zone.js": "^0.6.12"
  }
}

The working project uses:

systemjs:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  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: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    '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: '/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 = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

typings:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "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.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

I am unable to pinpoint what is at fault here :/

[MarkPieszak]

The working project has rc.4 & core-js in its package.json "core-js": "^2.4.0".
This repo uses the older tsd and has es6-shim in it, core-js is much better.

Typescript2 just went into beta, but I'm sure we'll want to switch this repo to use that, as well as an even newer typings system (@types), but I'm still trying to figure out whether it's available/working with the beta2 release from 2 days ago.

For now? Just install core-js through tsd for now to your project, as well as adding core-js to your package.json dependencies. npm i core-js --save @skamlet

[skamlet]

Thanks for your help @MarkPieszak, I tried your recommendation but it still not working on IE9:
package.json:

{
  "name": "Angular2ASP",
  "version": "0.0.0",
  "devDependencies": {
    "bootstrap": "^3.3.6",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "extendify": "^1.0.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jquery": "^2.2.1",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.0",
    "ts-loader": "^0.8.1",
    "typescript": "^1.8.2",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-hot-middleware": "^2.10.0"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/platform-server": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "angular2-universal": "^0.104.1",
    "aspnet-prerendering": "^1.0.2",
    "aspnet-webpack": "^1.0.1",
    "core-js": "^2.4.0",
    "css": "^2.2.1",
    "isomorphic-fetch": "^2.2.1",
    "preboot": "^2.0.10",
    "rxjs": "5.0.0-beta.6",
    "webpack-externals-plugin": "^1.0.0",
    "zone.js": "^0.6.12"
  }
}

tsd.json:

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "requirejs/require.d.ts": {
      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
    },
    "core-js/core-js.d.ts": {
      "commit": "b66d6115d7a8cd74af45e59d36c4447e5d1e9a52"
    }
  }
}

Am I missing something, should I change something in the webpack's configuration file too?

[MarkPieszak]

The working one also has bootstrap, maybe that one for some reason has the IE9 fix you're missing? I'm surprised it isn't working already. Then again rc4 says IE9 tests have failed, so maybe you're hitting some of these.

[skamlet]

I found something interesting
The Index.cshtml is using those two lines:

<app asp-prerender-module="ClientApp/boot-server"
     asp-prerender-webpack-config="webpack.config.js">Loading...</app>

if i replace them with a simple <app>Loading...</app> the application is only showing the "Loading..." text, it never loads the rest.

For information I created the project following @SteveSanderson's blog post: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

[MarkPieszak]

prerender module is what's using Universal to create the Angular page on the server side and send the entire rendered thing to the client. Webpack of course just links to where the webpack file is located.

It wouldn't load without those.

[skamlet]

Ok, I think the problem is that the vendor.js generated from webpack is not loading correctly in IE 9
I've got the following error: Object doesn't support the property or method "keys"

maybe core-js or es6-shim are not loaded at the right time...

[MarkPieszak]

They should be loaded prior to everything else if possible (usually at the top of vendor)

[Gimly]

I've got the exact same problem with IE11. Project straight out of yo works correctly in Chrome and Firefox, but in IE11 I get the same error as @skamlet. Interestingly, my computer's locale is also in French. Could it be an issue with the locale?

@skamlet did you find a workaround?

[skamlet]

Hey @Gimly, I had to import es6-shim before anything else in the boot-client.ts file:

import 'es6-shim';

require('zone.js');
import 'bootstrap';
import 'reflect-metadata';
import './styles/site.css';

import { bootstrap } from '@angular/platform-browser-dynamic';
import { FormBuilder } from '@angular/common';
import { provideRouter } from '@angular/router';
import { HTTP_PROVIDERS } from '@angular/http';
import { App } from './components/app/app';
import { routes } from './routes';

bootstrap(App, [
    ...HTTP_PROVIDERS,
    FormBuilder,
    provideRouter(routes)
]);

// Basic hot reloading support. Automatically reloads and restarts the Angular 2 app each time
// you modify source files. This will not preserve any application state other than the URL.
declare var module: any;
if (module.hot) {
    module.hot.accept();
}

[Gimly]

Awesome, it's working, thanks. Shouldn't that be added to the base project?