Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error with Angular 8 and Internet Explorer #17282

Closed
Gnorro opened this issue Mar 23, 2020 · 3 comments
Closed

Error with Angular 8 and Internet Explorer #17282

Gnorro opened this issue Mar 23, 2020 · 3 comments

Comments

@Gnorro
Copy link

@Gnorro Gnorro commented Mar 23, 2020

馃悶 Bug report

Our app in angular 8 is very slow when using Internet Explorer, and there are also some errors in console

Description

We have a big angular 8 app. We need it to be usable also with IE, but we encounter some problems when using it.

馃敟 Exception or Error

IE console errors:
Cattura2

馃實 Your Environment


Angular CLI: 8.3.23
Node: 10.16.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cdk                      8.2.3
@angular/cli                      8.3.23
@angular/material                 8.2.3
@angular/pwa                      0.900.1
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.5.4
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?

My polyfills


/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * 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/weak-map';
// import 'core-js/es6/set';

/**
 * If the application will be indexed by Google Search, the following is required.
 * Googlebot uses a renderer based on Chrome 41.
 * https://developers.google.com/search/docs/guides/rendering
 **/
// import 'core-js/es6/array';

/** 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 for the Reflect API. */
// import 'core-js/es6/reflect';

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
//  (window as any).__zone_symbol__UNPATCHED_EVENTS = ['resize'];
 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

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


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

Anything else relevant?

My browserlist


# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11

My tsconfig.json


{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

My tsconfig.e2e.json


{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

My package.json


{
  "name": "xxx",
  "version": "0.0.0",
  "scripts": {
    ...
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.7",
    "@agm/js-marker-clusterer": "1.1.0",
    "@angular/animations": "8.2.14",
    "@angular/cdk": "8.2.3",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/material": "8.2.3",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/platform-server": "8.2.14",
    "@angular/pwa": "0.900.1",
    "@angular/router": "8.2.14",
    "@angular/service-worker": "8.2.14",
    "@satispay/web-button-factory": "1.4.3",
    "angular4-social-login": "1.1.1",
    "basicrotate": "^1.1.0",
    "braintree-web": "3.57.0",
    "braintree-web-drop-in": "1.22.0",
    "classlist.js": "^1.1.20150312",
    "codice-fiscale-js": "2.2.4",
    "domino": "2.1.3",
    "express": "4.17.1",
    "font-awesome": "4.7.0",
    "hammerjs": "2.0.8",
    "js-marker-clusterer": "1.0.0",
    "lory.js": "2.5.3",
    "md5": "2.2.1",
    "moment-mini-ts": "2.20.1",
    "ng-lazyload-image": "7.0.1",
    "ng2-cookies": "1.0.12",
    "ngx-gallery": "5.10.0",
    "ngx-json-ld": "0.3.1",
    "ngx-loadable": "1.1.1",
    "ngx-responsive": "8.0.1",
    "ngx-swiper-wrapper": "8.0.2",
    "paypal-checkout": "4.0.311",
    "rxjs": "~6.5.4",
    "tslib": "1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.803.23",
    "@angular/cli": "8.3.23",
    "@angular/compiler-cli": "8.2.14",
    "@angular/language-service": "8.2.14",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.0",
    "karma-jasmine-html-reporter": "1.5.1",
    "node-ts": "5.0.1",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "3.5.3",
    "webpack-bundle-analyzer": "3.3.2"
  }
}

Thanks

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Mar 23, 2020

Hi @Gnorro, IntersectionObserver is not available in Internet Explorer. See: https://caniuse.com/#search=IntersectionObserver

You will need add a polyfill ex: https://github.com/w3c/IntersectionObserver/tree/master/polyfill

@Gnorro

This comment has been minimized.

Copy link
Author

@Gnorro Gnorro commented Mar 23, 2020

Thanks Alan

Do you think our other configurations are ok?

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Mar 23, 2020

@Gnorro, yes, they look okay.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can鈥檛 perform that action at this time.