Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

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

Closed
@skamlet

Description

@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

Activity

laskoviymishka

laskoviymishka commented on Jul 12, 2016

@laskoviymishka
Contributor

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

skamlet commented on Jul 12, 2016

@skamlet
ContributorAuthor

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

laskoviymishka commented on Jul 12, 2016

@laskoviymishka
Contributor

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

MarkPieszak commented on Jul 12, 2016

@MarkPieszak
Contributor

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

skamlet commented on Jul 13, 2016

@skamlet
ContributorAuthor

@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

MarkPieszak commented on Jul 13, 2016

@MarkPieszak
Contributor

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

skamlet commented on Jul 13, 2016

@skamlet
ContributorAuthor

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

MarkPieszak commented on Jul 13, 2016

@MarkPieszak
Contributor

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

skamlet commented on Jul 13, 2016

@skamlet
ContributorAuthor

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

MarkPieszak commented on Jul 13, 2016

@MarkPieszak
Contributor

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

skamlet commented on Jul 13, 2016

@skamlet
ContributorAuthor

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"

image

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

MarkPieszak

MarkPieszak commented on Jul 13, 2016

@MarkPieszak
Contributor

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

Gimly

Gimly commented on Jul 22, 2016

@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

skamlet commented on Jul 22, 2016

@skamlet
ContributorAuthor

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

Gimly commented on Jul 22, 2016

@Gimly

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

7 remaining items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Gimly@SteveSandersonMS@colltoaction@skamlet@MarkPieszak

        Issue actions

          Angular2's (click) events doesn't work on IE 9 · Issue #172 · aspnet/JavaScriptServices