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 [email protected] 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