Finding ResizeObserver with Typescript in Angular 9

Installing this node package

npm i -D @types/resize-observer-browser

solved the issue in Angular 10 project.

I suggest using resize-observer-polyfill it has types (in d.ts file) and if the browser support Resize Observer it just uses native implementation, but it has larger support because it uses Mutation Observer as a fallback that has a much bigger support.

So just use:

import ResizeObserver from 'resize-observer-polyfill';

Browser supports to compare:

• Resize Observer
• Mutation Observer

as you can see Mutation Observer even work in IE 11.

I had the same problem because I of the empty "types" array in my tsconfig file. Solved by adding "resize-observer-browser" to the types array:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types": ["resize-observer-browser"],
  }
}

Install @types/resize-observer-browser not working on Angular 11. I ended up doing like this:

const observer = new (window as any).ResizeObserver...

Install npm i -D @types/resize-observer-browser

Add to tsconfig "types": ["resize-observer-browser"]

Just add the @ts-ignore flag. This will make Typescript happy again:

// @ts-ignore
const obs = new ResizeObserver(e => {
    // ...
});

I've never used ResizeObserver, however I do use fromEvent from RxJS with the resize event and it's working fine. Here is the code for it.

import { fromEvent, Observable, Subscription } from "rxjs";

resizeObservable$: Observable<Event>;
resizeSubscription$: Subscription;

ngOnInit() {
  this.resizeObservable$ = fromEvent(element, 'resize')
  this.resizeSubscription$ = this.resizeObservable$.subscribe(evt => {
     // do whatever you waant
  })
}

ngOnDestroy() {
  this.resizeSubscription$.unsubscribe();
}

I had the same issue in React that only happened for me in a specific iOs version (13.3), as @saberprashant mentioned, try to import it with import ResizeObserver from 'resize-observer-polyfill'; even if your IDE doesn't recommend that import.

I can't find a way to import @types/resize-observer-browser into my Angular 11 application. My workaround is to use declare:

    import { Component, ElementRef, OnInit, OnDestroy } from "@angular/core";
    
    declare var ResizeObserver;
    
    @Component({
      selector: "my-app"
    })
    export class AppComponent implements OnInit, OnDestroy {
      observer;
    
      constructor(private host: ElementRef) {}
    
      ngOnInit() {
        this.observer = new ResizeObserver(entries => {
           // handle resize 
        });
        this.observer.observe(this.host.nativeElement);
      }
    
      ngOnDestroy() {
        this.observer.unobserve(this.host.nativeElement);
      }
    }

Based on the typescript issue discussion, newer version of typescript can solve the issue.

If upgrading typescript is out of your control (like me, we are running an Angular 9 application, that only support typescript version from 3.6 to 3.8) const observer = new (window as any).ResizeObserver(...) solved the issue temporarily.

I have encountered this problem with Angular 11 and none of the solutions suggested felt suitable:

1. Any workarounds like
   const observer = new (window as any).ResizeObserver
   or
   declare var ResizeObserver;
   Look like a hack rather than the solution

2. Installing polyfill
   import ResizeObserver from 'resize-observer-polyfill';
   Was not an option because I wanted to use native observer rather than polyfill

What helper was installing type definitions

npm i -D @types/resize-observer-browser 

And adding them to tsconfig.json

But rather than adding to types (which does not help)
{"compilerOptions": { "types": ["resize-observer-browser"]}

I've added the definition file itself

"files": ["node_modules/@types/resize-observer-browser/index.d.ts"]

Works like a charm

I was unable to fix this with any of the provided answers in this thread for a lib in my Nx workspace.

I also installed the dep: @types/resize-observer-browser

Then where I use the ResizeObserver, I had to add the following to the top of my file:

/// <reference types="resize-observer-browser" />

Annoying as hell, but beats new (window as any).ResizeObserver(), atleast in my opinion.

using the ResizeObserver like below

let observer = new (ResizeObserver as any)((entries) => {
      let currentWidth = entries[0].contentRect.width;
    });
    observer.observe(document.getElementById('someId'));
  }

working for me