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!
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"],
}
}
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:
as you can see Mutation Observer even work in IE 11.
Installing this node package
npm i -D @types/resize-observer-browser
solved the issue in Angular 10 project.