Internet Explorer

[VBukharov]

Yes, I know, but still... Do you support IE 11?

JS lib said

Supported browsers: Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11.

I tried to run a demo in IE and it fails with an error.

When I add NgJsonEditorModule in app-module.ts my application fails in IE with error:

const BG_TRANSP = url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E");

In other browsers, it runs fine.

Can you help me with this?

[mariohmol]

is there more stack trace of this error? we need more info..

I dont see this piece of this code in the source

[VBukharov]

I solved this problem.

The error comes from library vanilla-picker which doesn't support IE.

I use transpilation for node_module/vanilla-picker with babel-loader and custom webpack config.

[mariohmol]

but this project does not use this module right?

[VBukharov]

Yes, it is used by JS lib.
But in a final bundle, unsupported symbols appear from vanilla-picker.

[svitlychnyi]

@VBukharov can you please share the configuration for transpilation, since I have exactly the same issue.

[VBukharov]

Hi!

I installed additional dependencies in package.json:

"devDependencies": {
    "@angular-builders/custom-webpack": "^7.5.2",
    "@angular-builders/dev-server": "^7.3.1",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6"
}

fixed configuration in angular.json:

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            },

and added webpack config

/**
 * Additional configuration for webpack.
 *
 * @type {module:path}
 */
const path = require('path');

/**
 * Contains webpack loader for ES6 code transpiling.
 * Work around for IE11
 */
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        include: [
          path.resolve(__dirname, 'node_modules', 'vanilla-picker')
        ],
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env', {
                targets: {
                  ie: 11
                }
              }
            ]
          ]
        }
      }
    ]
  }
};

[svitlychnyi]

@VBukharov you saved my day! Many thanks.

[mariohmol]

Thanks!! I included this guide in the Readme