Applicationinsights-js: error TS2430: Interface 'Window' incorrectly extends interface 'WindowEventHandlers'

[alvipeo]

I'm using it in angular 8 app and recently it started to throw this error:

ERROR in node_modules/typescript/lib/lib.dom.d.ts:17123:11 - error TS2430: Interface 'Window' incorrectly extends interface 'WindowEventHandlers'.
Types of property 'onunhandledrejection' are incompatible.
Type '((this: Window, ev: PromiseRejectionEvent) => any) | null' is not assignable to type '((this: WindowEventHandlers, ev: PromiseRejectionEvent) => any) | null'.
Type '(this: Window, ev: PromiseRejectionEvent) => any' is not assignable to type '(this: WindowEventHandlers, ev: PromiseRejectionEvent) => any'.
The 'this' types of each signature are incompatible.
Type 'WindowEventHandlers' is missing the following properties from type 'Window': Blob, TextDecoder, TextEncoder, URL, and 225 more.

17123 interface __Window__ extends EventTarget, WindowTimers, WindowSessionStorage, WindowLocalStorage, WindowConsole, GlobalEventHandlers, IDBEnvironment, WindowBase64, GlobalFetch, WindowOrWorkerGlobalScope, WindowEventHandlers {

Now, I get this error only when I use strict=true in __tsconfig.json__. But it wokder with previous versions of this package without any issue.

I did check - if I remove microsoft/applicationinsights-web package and related code everything works. So this is clearly the proble with microsoft/applicationinsights-web.

Here's the angular service which causes the problem:

import { Injectable, OnInit } from "@angular/core";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
import { ActivatedRouteSnapshot, ResolveEnd, Router } from "@angular/router";
import { filter, map } from "rxjs/operators";
import { Subscription } from "rxjs";
import { environment } from "src/environments/environment";

@Injectable({
  providedIn: "root"
})
export class AppInsightsService {
  private routerSubscription: Subscription;

  private appInsights = new ApplicationInsights({
    config: {
      instrumentationKey: environment.production
        ? "b6f62105-85a5-4055-b483-466d57ebb263" // production
        : "b9eb5e3c-0581-4bb4-ad69-234d3ab7c8fd" // dev
    }
  });

  constructor(private router: Router) {
    this.appInsights.loadAppInsights();
    this.routerSubscription = this.router.events
      .pipe(
        filter(event => event instanceof ResolveEnd),
        map(ev => ev as ResolveEnd)
      )
      .subscribe((event: ResolveEnd) => {
        const activatedComponent = this.getActivatedComponent(event.state.root);
        if (activatedComponent) {
          this.logPageView(
            `${activatedComponent.name} ${this.getRouteTemplate(
              event.state.root
            )}`,
            event.urlAfterRedirects
          );
        }
      });
  }

  setUserId(userEmail: string) {
    this.appInsights.setAuthenticatedUserContext(userEmail);
  }

  clearUserId() {
    this.appInsights.clearAuthenticatedUserContext();
  }

  logPageView(name?: string, uri?: string) {
    this.appInsights.trackPageView({ name, uri });
  }

  private getActivatedComponent(snapshot: ActivatedRouteSnapshot): any {
    if (snapshot.firstChild) {
      return this.getActivatedComponent(snapshot.firstChild);
    }

    return snapshot.component;
  }

  private getRouteTemplate(snapshot: ActivatedRouteSnapshot): string {
    let path = "";
    if (snapshot.routeConfig) {
      path += snapshot.routeConfig.path;
    }

    if (snapshot.firstChild) {
      return path + this.getRouteTemplate(snapshot.firstChild);
    }

    return path;
  }
}

Removing it removes the error.

__Windows 10 x64, node 12.14.1, typescript 3.5.3__

[MSNev]

Hi Alex, what version of typescript are you using?
onunhandledrejection support was added as part of 2.4 and was committed on Dec 19 with #1070 and has been requested multiple times for a while now.

I think there are a couple of possible work arounds for this, one of which you already have identified

• disable strict=true
• add the following to extend window (which is what we had to do)
  declare global {
  interface Window { onunhandledrejection: ((this: Window, ev: PromiseRejectionEvent) => any) | null; }
  }

We also have an outstanding work item (and PR) to bump the version of TS used to build the modules, however, do to current backward incompatibility issues with some large users we are investigating the issues and work arounds before pushing the change, as part of that change we will most likely be performing a version bump to signify the potential breaking change.

Let us know on the above as the only other workaround would be to use indexed assignment to possible avoid the error, which will likely not happen until the next release (scheduled for end of feb)

[alvipeo]

typescript 3.5.3 (max version supported by angular 8).

disabling strict is not an option at all.

I'll try declare global but that seems like a hack to me.

But if you could fix this by angular 9 release (which is a week or two away) that would be great!

[MSNev]

This is included in version 2.4.4, and is included in the NPM package, will close the issue once we publish this version to the primary CDN.

[MSNev]

The Hotfix v2.4.4 release (which includes this change) is now fully deployed.