CODEWITHSUNDEEP
javascriptangulartypescriptinternet-explorer
stec1
stec1

Reputation: 216

Error in IE 11 browser - EXCEPTION: Object doesn't support property or method 'matches' , other browser it works fine

In my case, the webpage works fine in firefox and chrome browser but in IE v.11 it shows error as error comes in IE 11 DEVELOPER TOOLS. The error shows up in developer tools of the IE 11. The error does not allow to open a perticular link , on clicking it shows the following error.

In all browser it runs fine but in IE 11 the following error pops up. any help.

polyfills.ts - 

* BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.

tsconfig.spec.json -

"compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es6",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts"
  ]
}

tsconfig.json 

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "target": "es5",
    "experimentalDecorators": true,
    "lib": [
      "es2015"
    ]
  }
}

Upvotes: 19

Views: 32658

Answers (3)

Michael Coxon
Michael Coxon

Reputation: 3535

For those using Angular 6 and 7 (typescript) you should modify Sanjay Gupta's answer below with:

if (!Element.prototype.matches) {
  Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

The casting (well, untyping, really) allows the transpiler to parse the undefined method.

Upvotes: 19

Sanjay Gupta
Sanjay Gupta

Reputation: 387

I was facing same issue after I updated my project from Angular 5 to 6. I found a solution with help of Derek Brown's comment. The solution is to add the following in the polyfill.ts file:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector;
}

Upvotes: 28

Derek Brown
Derek Brown

Reputation: 4419

It looks like IE implements the matches function using a non-standard name (source). That link includes a polyfill which will define the matches function so it can be used on IE.

Upvotes: 9

Related Questions