0

I have an Angular application with the functionality of choosing a map on which the user can select the point of delivery of the goods.

The problem is that this does not work in IE - the map opens, but delivery points are not loaded. Also if you increase or decrease the map, it simply freezes.

I tried uncommenting the data from polyfills.ts but that didn't help. Now there is the following code:

/**
 * 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
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.
import 'classlist.js';
/**
 * 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
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (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__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  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
 */

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

And here is the error output from the console: console output

Error:Command not supported by object(23278,23)

akokoryshkin
  • 1
  • 2
  • I am assuming that you are using the IE 11 browser, please confirm it and also inform us the version of the Angular app you are using. I am not sure which kind of map you are using in the angular app. I suggest you please provide more information about it. If possible then please try to share a sample code that can help us to understand the issue in a better way. I suggest you check the console of the browser, if there is any error or warning then please inform us about it. Thanks for your understanding. – Deepak-MSFT Sep 28 '20 at 05:20
  • Yes, IE version is 11. Angular version is 9.0.7 As for the code, here is all the code that is used: https://github.com/AlexeyKokoryshkin/Angular-map.git – akokoryshkin Sep 28 '20 at 06:59
  • In the description of the question, added error output from the console – akokoryshkin Sep 28 '20 at 07:21

1 Answers1

0

I can see that you are getting an error Object doesn't support property or method 'includes'

You are getting this error because String.prototype.includes() method and Array.prototype.includes() method are not supported in the IE browser.

I suggest you add the below polyfill in the polyfill.ts file.

import 'core-js/es7/array';

It may help you to fix this error.

Reference:

Object doesn't support property or method 'includes'

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19
  • Yes, it really helped me! The map works and it even displays the items I need. But by clicking on any item, nothing happens and a new error appears in the console: 1. The command is not supported by the object (23278,23) 2. It was not possible to get the 'getClusters' property of the link whose value is undefined or is NULL (23278,23) ... Above I have attached a screenshot of what is on the line (23278,23). Is there a way to avoid this error ?? – akokoryshkin Sep 30 '20 at 08:42
  • I try to search for the error but did not get any helpful information about it. I suggest you check the documentation for that map library and see whether it is compatible with the IE browser. You can also try to share the link of the docs here. I can try to check whether anything needs to change for an IE browser. For testing purposes, also try to add import 'core-js/es7/map'; see whether it makes any difference. – Deepak-MSFT Oct 01 '20 at 09:22