How to Solve “Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator” error in Angular 13 & TypeScript

When you are working in an Angular application and implementing functionality such as Drag and Drop which involves handling FileList, then you may come across the TypeScript error “Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator”

The reason for the error message is, TypeScript by default do not know about the Iterable DOM elements. FileList is one of such Iterable Object. That means if you check the FileList in the console, it looks like an object but it is also an iterable. That means, we can use iterator methods such as for..of or spread operator(…) on these iterables.

To solve the problem, you can go to your tsconfig.json file and add “DOM.Iterable” to lib array which tells TypeScript about the typings of DOM iterables which includes FileList.

example:

...
"lib": [
      "es2018",
      "dom",
      "DOM.Iterable"
    ]
...