Base solution for your next web application
Open Closed

IE11 javascript error - SCRIPT1004: Expected ';' - Angular/ASP.NET Core version #9061


User avatar
0
morindo created

Hi guys,

Truly sorry to ask this question, I know, IE11 is dead. Unfortunately, couple of our clients still have IE11 and they cannot use our software at the moment.

We are getting a script error in Angular vendor.js file probably caused by es6 syntax. It seems to be related to ngx-charts@13.0.4 package that reference d3-array@^2.4.0.

Is there anything we can do to fix this?

We use Angular/ASP.NET Core 8.6.0.0 version.

Thank you,

`// "./node_modules/d3-array/src/count.js":
/
!
****************************************!
!
./node_modules/d3-array/src/count.js !
*
*************************************/
/
! exports provided: default /
/
/ (function(module, webpack_exports, webpack_require) {

"use strict";
webpack_require.r(webpack_exports);
/* harmony export (binding) */ webpack_require.d(webpack_exports, "default", function() { return count; });
function count(values, valueof) {
let count = 0;
if (valueof === undefined) {
for (let value of values) {
if (value != null && (value = +value) >= value) {
++count;
}
}
} else {
let index = -1;
for (let value of values) {
if ((value = valueof(value, ++index, values)) != null && (value = +value) >= value) {
++count;
}
}
}
return count;
}`


4 Answer(s)
  • User Avatar
    0
    morindo created

    Found the answer: @swimlane/ngx-charts v13 has peer dependency d3-array v2.4.0. Since v2 d3-array has stopped to support ie11.

    https://github.com/swimlane/ngx-charts/issues/1353

    I've downgrade @swimlane/ngx-charts to "^12.1.0" and it work now.

    I'm now getting a new error, yeah!

    In app-main-main-module.js, Syntax error.

    /**
     * The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
     * @class Emitter
     * @module Emitter
     */
    class Emitter {
      constructor() {
        this.callbacks = {};
      }
    
      /**
       * Registers callbacks by event name
       * @param {String} type
       * @param {...Function} callbacks
       */
      on(type, ...callbacks) {
        if (!this.callbacks[type]) {
          this.callbacks[type] = [];
        }
    
        this.callbacks[type].push(...callbacks);
    
        return this;
      }
    
      /**
       * Unregisters callbacks by event name
       * @param {String} type
       * @param {Function} callback
       */
      off(type, callback) {
        if (!this.callbacks[type]) {
          return null;
        }
    
        const copy = this.callbacks[type].slice(0);
    
        for (let i = 0; i < copy.length; i++) {
          if (callback === copy[i]) {
            this.callbacks[type].splice(i, 1);
          }
        }
    
        return this;
      }
    
      /**
       * Triggers event callbacks by event object
       * @param {AbstractEvent} event
       */
      trigger(event) {
        if (!this.callbacks[event.type]) {
          return null;
        }
    
        const callbacks = [...this.callbacks[event.type]];
        const caughtErrors = [];
    
        for (let i = callbacks.length - 1; i >= 0; i--) {
          const callback = callbacks[i];
    
          try {
            callback(event);
          } catch (error) {
            caughtErrors.push(error);
          }
        }
    
        if (caughtErrors.length) {
          /* eslint-disable no-console */
          console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
          /* eslint-disable no-console */
        }
    
        return this;
      }
    }
    exports.default = Emitter;
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @morindo

    Thank you for finding the solution for first problem.
    Could you share the full exception message in the browser console for second error ?

  • User Avatar
    0
    morindo created

    Ok, I've added npm packages like classlist.js and web-animations-js in order to support IE 11.

    How To Fix Your Angular App When It’s Not Working in IE11
    https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920

    Now, last error is due too SignalR, related to:

    IE (11) - not working, no dashboard - datatables not loading
    https://support.aspnetzero.com/QA/Questions/8471

    I'm getting SCRIPT1002: Syntax error
    abp.signalr-client.js (32,30)

    `
    function configureConnection(connection) {
    // Set the common hub
    abp.signalr.hubs.common = connection;

        let tries = 1;
        let reconnectTime = abp.signalr.reconnectTime;
    
        // Reconnect loop
        function tryReconnect() {
            if (tries > abp.signalr.maxTries) {
                return;
            } else {
                connection.start()
                    .then(() => {
                        reconnectTime = abp.signalr.reconnectTime;
                        tries = 1;
                        console.log('Reconnected to SignalR server!');
                    }).catch(() => {
                        tries += 1;
                        reconnectTime = abp.signalr.increaseReconnectTime(reconnectTime);
                        setTimeout(() => tryReconnect(), reconnectTime);
                    });
            }
        }
    

    `

    I fixed the problem locally adding es5 syntax in abp.signalr-client.js file.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Thanks, we will fix it as well in AspNet Boilerplate, https://github.com/aspnetboilerplate/aspnetboilerplate/issues/5611