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

skamlet · 2016-07-12T14:48:14Z

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

The text was updated successfully, but these errors were encountered:

laskoviymishka · 2016-07-12T16:02:38Z

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 · 2016-07-12T17:24:34Z

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 · 2016-07-12T17:28:33Z

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 · 2016-07-12T21:08:23Z

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 · 2016-07-13T11:38:00Z

@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 · 2016-07-13T11:43:55Z

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 · 2016-07-13T11:56:25Z

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 · 2016-07-13T12:19:25Z

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 · 2016-07-13T12:47:09Z

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 · 2016-07-13T12:52:18Z

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 · 2016-07-13T13:54:14Z

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 · 2016-07-13T15:00:13Z

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

Gimly · 2016-07-22T08:25:18Z

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 · 2016-07-22T08:39:11Z

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 · 2016-07-22T08:44:48Z

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

skamlet · 2016-07-22T08:46:07Z

I think you're right, I'll make a pull request for this.

SteveSandersonMS · 2016-07-27T12:37:42Z

The PR was merged. Thanks!

colltoaction · 2016-09-01T21:43:33Z

People are using core-js because it's faster. See the discussion here.

Here's what we'd need to polyfill using it, as done in angular-cli.

MarkPieszak · 2016-09-02T01:24:11Z

@tinchou Spot on!
At least for the Angular2 Template i'll add it when I'm able to merge the rc6-ready Universal, it inherently needs those polyfills actually :)
They'll be part of import '@angular/universal-polyfills/node' & browser when we publish.

skamlet mentioned this issue Jul 22, 2016

fix angular's (click) events not being triggered on IE9 #211

Closed

SteveSandersonMS closed this as completed Jul 27, 2016

EduardTheThird mentioned this issue Dec 1, 2016

Angular/Aurelia/React Template: IE9 Support #484

Closed

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

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

Comments

skamlet commented Jul 12, 2016

laskoviymishka commented Jul 12, 2016

Uh oh!

skamlet commented Jul 12, 2016

Uh oh!

laskoviymishka commented Jul 12, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MarkPieszak commented Jul 12, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skamlet commented Jul 13, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

The NOT working project is using:

The working project uses:

Uh oh!

MarkPieszak commented Jul 13, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skamlet commented Jul 13, 2016

Uh oh!

MarkPieszak commented Jul 13, 2016

Uh oh!

skamlet commented Jul 13, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MarkPieszak commented Jul 13, 2016

Uh oh!

skamlet commented Jul 13, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MarkPieszak commented Jul 13, 2016

Uh oh!

Gimly commented Jul 22, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skamlet commented Jul 22, 2016

Uh oh!

Gimly commented Jul 22, 2016

Uh oh!

skamlet commented Jul 22, 2016

Uh oh!

SteveSandersonMS commented Jul 27, 2016

Uh oh!

colltoaction commented Sep 1, 2016

Uh oh!

MarkPieszak commented Sep 2, 2016

Uh oh!

laskoviymishka commented Jul 12, 2016 •

edited

Loading

MarkPieszak commented Jul 12, 2016 •

edited

Loading

skamlet commented Jul 13, 2016 •

edited

Loading

MarkPieszak commented Jul 13, 2016 •

edited

Loading

skamlet commented Jul 13, 2016 •

edited

Loading

skamlet commented Jul 13, 2016 •

edited

Loading

Gimly commented Jul 22, 2016 •

edited

Loading