Finding ResizeObserver with Typescript in Angular 9

Question

I am trying to implement a ResizeObserver in an Angular app:

const obs = new ResizeObserver(e => {
      // ...
});

... and am met with the TS error:

TS2304: Cannot find name 'ResizeObserver'.

I've tried to update my type definition with:

@types/resize-observer-browser

... however my issue persists. Is there an advisable solution or common workaround, or would it be better to use an NPM package like 'resize-observer' to keep moving forward?

Happy to include more info if needed.

Tks!

Answer 1

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"],
  }
}

Answer 2

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.

Answer 3

Installing this node package

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

solved the issue in Angular 10 project.

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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