Angular 11 - TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation

Question

I am using a dependency which itself depends on isomorphic-unfetch . In an Angular 11 project, I can execute isomorphic-unfetch itself without any errors. When using the dependency (installed via npm), which internally uses isomorphic-unfetch to fetch, I receive the following message:

index.js:209 TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
at zone-evergreen.js:1465
at Object.proto.<computed> [as default] (zone-evergreen.js:975)
at index.js:189
at step (index.js:70)
at Object.next (index.js:51)
at index.js:44
at new ZoneAwarePromise (zone-evergreen.js:1387)
at __awaiter (index.js:40)
at index.js:380

The dependency is working fine when integrated in React or plain JS/TS. I found some related questions on here that did not target Angular in specific.

Answer 1

As Angular provides their own library for making http requests HttpClientModule and HttpClient there is usually no need for third party libraries like unfetch etc. This is the reason nobody targets Angular in the docs or other places.

But it should still be possible to use the library. Some hints that I can think of went wrong in your case:

• Window is written with a capital W instead of a w .
• Maybe you need to initialize some peer dependencies like import 'unfetch' to run their default script (which will then add the fetch function to the window object)