core-js: Object expected error thrown in angular 9 application - In IE11

i all. I am developing an angular application which is running on version 9.0.x. The application runs as an ifame of the parent application. There is a signalR connection to the backend and we try to close the connection when the frame is unloading using @microsoft/signalr HubConnection.stop() method.

What is the problem: When the application runs on IE 11, when the above is called , it works fine in the normal scenario. But when called on window unload as follows

import { Component, OnDestroy, OnInit } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'lkasjsd';

  hubConnection: HubConnection;
  subject = new Subject();
  subjectObs = this.subject.asObservable();

  ngOnInit() {
    this.hubConnection =
      new HubConnectionBuilder().withUrl('/diagHub?RequestId=ed8a41ef-9c47-4de6-8029-bbe7971041ce&AuthenticationToken=4EVYS-Q39CA&AuthenticationType=1&ToolId=EA0100&WorkStreamId=None').build();
    window.addEventListener('unload', this.handleWindowUnload.bind(this));

    this.hubConnection.start().then(() => {
      console.log('Connnected Success');
    });

    this.subjectObs.subscribe(() => {
      console.log('Stopping');
      this.hubConnection.stop();
    })
  }

  handleWindowUnload() {
      this.subject.next();
  }
}

i see the following error in the IE browser console

What is more weird:

Just out of curiosity i changed the code in node_modules\core-js\internals\to-integer.js and put a console log

This results in the log as follows

If you see isNaN was deffined before but gets undefined in the middle of executiion. !!

Also the issue gets resolved if i install core-js@2.5.4 manually and import the following in the polyfills file

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

How is this possible ? What am i missing here ?

My dev box

Angular CLI: 9.0.4 Node: 10.19.0 OS: win32 x64

Angular: … Ivy Workspace:

Angular

Package Version

@angular-devkit/architect 0.900.4 @angular-devkit/core 9.0.4 @angular-devkit/schematics 9.0.4 @schematics/angular 9.0.4 @schematics/update 0.900.4 rxjs 6.5.3

tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

I can reproduce now, and this issue has nothing to do with zone.js or core-js or rxjs, the error happened in to-integer.js, and the reason is isNaN becomes undefined, in fact, not only isNaN, all global object inside iframe window object becomes undefined, I don’t know it is the spec of IE or not, it seems , after iframe window unload, the window clear itself by setting all it’s properties to undefined. And since hubconnection.stop() is async operations, so it happened after unload. Also I don’t think the comment https://github.com/dotnet/aspnetcore/issues/20959#issuecomment-618061167 is correct, since Array.prototype.slice() allow pass no parameters, it will just clone the whole array, and also the error stack trace is not from zone.js, it is from rxjs, but still I don’t think it is any lib’s issue, it is just a IE behavior. screenshot

And I also created a sample application to reproduce it without zone.js or rxjs or even angular and signalR.

create a html file test.html.

<html>
  <body>
    <button id="add" onclick="add()">Add</button>
    <button id="remove" onclick="remove()">Remove</button>
    <div id="iframe"></div>
  </body>
  <script>
    function add() {
      var ifrm = document.createElement("iframe");
      ifrm.setAttribute("src", "http://localhost:8080/frame.html");
      ifrm.style.width = "640px";
      ifrm.style.height = "481px";
      document.getElementById("iframe").appendChild(ifrm);
    }

    function remove() {
      let element = document.getElementsByTagName("iframe")[0];
      document.getElementById("iframe").removeChild(element);
    }
  </script>
</html>

create a frame.html.

<script src="https://raw.githack.com/zloirock/core-js/v2.6.9/client/core.min.js"></script>
<script>
  window.onload = function () {
    console.log("iframe loaded");
    window.addEventListener("unload", function () {
      console.log("unload");
      Promise.resolve().then(function () {
        var isNumber = isNaN(1);
        console.log("isNumber", isNumber);
      });
    });
  };
</script>
<div>
  iFrame
</div>

use a http-server to host frame.html in 8080
open test.html and add then remove in IE

you can see the isNaN becomes `undefined.

JiaLiPassion on Jun 18, 2020