Scully: Internet Explorer 11 compatibility

[kjbetz]

🐞 Bug report

Description

After adding Scully, app doesn't work in IE 11 anymore.

🔬 Minimal Reproduction

ng new scully-error
ng build
Open in IE 11, works
ng add @scullyio\init
ng build
Open in IE 11, error, no app displayed at all
Error: TypeError Object doesn't support his action

💻Your Environment

Angular Version:

Angular CLI: 9.1.1
Node: 12.16.1
OS: win32 x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Scully Version:

    "@scullyio/init": "0.0.23",
    "@scullyio/ng-lib": "latest",
    "@scullyio/scully": "latest",

🔥 Exception or Error

TypeError: Object doesn't support this action
   {
      [functions]: ,
      __proto__: { },
      description: "Object doesn't support this action",
      message: "Object doesn't support this action",
      name: "TypeError",
      number: -2146827843,
      stack: "TypeError: Object doesn't support this action
   at IdleMonitorService (http://localhost/vendor-es5.js:87056:9)
   at IdleMonitorService_Factory (http://localhost/vendor-es5.js:87362:9)
   at hydrate (http://localhost/vendor-es5.js:32065:13)
   at get (http://localhost/vendor-es5.js:31735:19)
   at injectInjectorOnly (http://localhost/vendor-es5.js:13480:9)
   at ɵɵinject (http://localhost/vendor-es5.js:13493:7)
   at ScullyLibModule_Factory (http://localhost/vendor-es5.js:88198:9)
   at hydrate (http://localhost/vendor-es5.js:32065:13)
   at get (http://localhost/vendor-es5.js:31735:19)
   at Anonymous function (http://localhost/vendor-es5.js:31785:13)",
      Symbol()_8.jdr2uhu1ip9: undefined,
      Symbol(INITIAL_VALUE)_j.jdr2uhu1ip9: undefined,
      Symbol(rxSubscriber)_i.jdr2uhu1ip9: undefined
   }

[geromegrignon]

I reproduce it.

Though ng build only generates the distribution files.
In order to use Scully pre rendering features, you need to use npm run scully after as stated in the documentation.
Doing so it works as intended on IE11.

[kjbetz]

Ok, I'll check it out and report back. Thanks, @geromegrignon!

[geromegrignon]

Make sure you use the dist/static folder

[kjbetz]

Although page does load (you can see the default Angular app on the screen) it still displaying the same error in the console.

On my app that I'm trying to use this on, page loads, but because of error all JavaScript is then not running, which means page features are not working properly.

Error:

TypeError: Object doesn't support this action
   {
      [functions]: ,
      __proto__: { },
      description: "Object doesn't support this action",
      message: "Object doesn't support this action",
      name: "TypeError",
      number: -2146827843,
      stack: "TypeError: Object doesn't support this action
   at IdleMonitorService (http://localhost/vendor-es5.js:87056:9)
   at IdleMonitorService_Factory (http://localhost/vendor-es5.js:87362:9)
   at hydrate (http://localhost/vendor-es5.js:32065:13)
   at get (http://localhost/vendor-es5.js:31735:19)
   at injectInjectorOnly (http://localhost/vendor-es5.js:13480:9)
   at ɵɵinject (http://localhost/vendor-es5.js:13493:7)
   at ScullyLibModule_Factory (http://localhost/vendor-es5.js:88198:9)
   at hydrate (http://localhost/vendor-es5.js:32065:13)
   at get (http://localhost/vendor-es5.js:31735:19)
   at Anonymous function (http://localhost/vendor-es5.js:31785:13)",
      Symbol()_8.c2uoks36qms: undefined,
      Symbol(INITIAL_VALUE)_j.c2uoks36qms: undefined,
      Symbol(rxSubscriber)_i.c2uoks36qms: undefined
   }

[SanderElias]

@kjbetz You might be missing a polyfill you need.
We have customers running with IE11, so it should not be an issue. There is stuff in Scully that only works on modern browsers, but that is used during rendering only.

[SanderElias]

You need the customEvent ployfill as documented on MDN

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  window.CustomEvent = CustomEvent;
})();

When you add that to your polyfill, it should work.

I will close this issue now, but if you have additional questions, don't hesitate to ask.
@jorgeucano do we have a IE11 docs page where we can add this?

[kjbetz]

I was never able to get it work... either in my project or from a clean new Angular 9 application. I tried adding polyfills, etc... same error.

I eventually took out the ScullyLib from my app module since I'm not really using it. And just ran the scully command to generate the static site.

[montella1507]

You need the customEvent ployfill as documented on MDN

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  window.CustomEvent = CustomEvent;
})();

When you add that to your polyfill, it should work.

I will close this issue now, but if you have additional questions, don't hesitate to ask.
@jorgeucano do we have a IE11 docs page where we can add this?

You have not solve this issue i think

you use new Event()

https://github.com/scullyio/scully/blob/main/libs/ng-lib/src/lib/idleMonitor/idle-monitor.service.ts#L52

polyfilll implements CustomEvent -> usage should be like:
e = document.createEvent('CustomEvent') and then e.initCustomEvent(...)

[dyingangel666]

Polyfill above is not working. Whoever is searching for a working Polyfill use the following one, install it and add it to your Polyfills.ts

https://www.npmjs.com/package/new-event-polyfill

[kappy904]

@dyingangel666 Thank you! Worked for me by installing and adding it to my polyfills.ts