Angular 11 - Error: The 'fetch' method could not be executed on the 'Window' object due to an illegal invocation

I have encountered an issue with a dependency in my current project. This particular dependency relies on isomorphic-unfetch for its functionality. Strangely, I am able to run isomorphic-unfetch without any problems within Angular 11. However, when I include the dependency that uses isomorphic-unfetch internally for fetching data (installed via npm), I see the following error 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

Interestingly, this dependency works perfectly fine when used with React or vanilla JS/TS projects. After researching, I couldn't find any specific solutions related to Angular.

angulartypescriptnpmfetchisomorphic-fetch-api

Answer №1

Due to Angular providing its own http request library, such as HttpClientModule and HttpClient, third party libraries like unfetch are not commonly used. This is why Angular is not specifically targeted in documentation or other resources.

However, it is still possible to incorporate these libraries. If you are having trouble, here are some potential reasons:

  • Window should be written with a lowercase w, not uppercase.
  • You may need to initialize certain peer dependencies, such as import 'unfetch', in order for the default script to function properly (which adds the fetch function to the window object).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing difficulties with implementing Angular material components in my project

I recently encountered an issue while trying to integrate angular material into my project. Despite importing the MatFormFieldModule, I received the following error: ERROR in src/app/login/components/login/login.component.html:2:1 - error NG8001: &apo ...

angulartypescript

Display information in a different sequence on the webpage compared to how it is stored in the

I'm struggling to display data from a database in a different order on my webpage. The table in my database has three columns: Day of the week, Open from, and Open to, which represents the opening hours for specific days of the week. Here is how it lo ...

angularspring-boot

Showing a base64 image in Angular 2

I have a challenge where I am attempting to display an image from a server using a base64 string. The specifics of the http and server are not crucial for my inquiry (in essence, it is functioning). However, the current code I have is not displaying the im ...

imageangularbase64

Tips for expanding the functionality of the d3-selection module using TypeScript

I am currently working on a project that involves TypeScript and d3. I have already installed 'd3' and '@types/d3', and my use of d3 looks like this: import * as d3 from 'd3'; const x = d3.scaleLinear ... Everything was goin ...

typescriptd3.jstypescript-typings

What is the reason why the [active] attribute does not function properly in <a mat-tab-link> in Angular?

<div class="d-flex d-column themed-tab-nav"> <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start"> <a mat-tab-l ...

angularangular-materialnavbar

Tips for preventing duplicate data fetching in Next.js version 13

I am currently in need of retrieving information from the database, generating metadata, and displaying the page content. The current method I am using is as follows: export const generateMetadata = async ({ params: { questionSlug }, }: Props): Promise&l ...

typescriptnext.jsnext.js13

Next.js Enhanced with Google Analytics

I've been experimenting with integrating Google Analytics into Next.js, following a tutorial on YouTube - https://www.youtube.com/watch?v=lMSBNBDjaH8 Following the instructions in the video, I added these two scripts in _document.js: <script async ...

reactjstypescriptnext.jsgoogle-analytics

What is the best way to initialize a value asynchronously for React context API in the latest version of NextJS, version

Currently, I'm working on implementing the React context API in my NextJS e-commerce application to manage a user's shopping cart. The challenge I'm facing is how to retrieve the cart contents from MongoDB to initiate the cart context. This ...

javascriptreactjstypescriptnext.jsserver-side-rendering

Setting Up Electron on Ubuntu

Recently, I decided to delve into electron frontend development and followed the installation guide provided on the electron website. Everything was smooth sailing until I reached the npm install electron --save-dev command. I even attempted it with sudo n ...

ubuntunpmelectron

Exploring the capabilities of extending angular components through multiple inheritance

Two base classes are defined as follows: export class EmployeeSearch(){ constructor( public employeeService: EmployeeService, public mobileFormatPipe: MobileFormatPipe ) searchEmployeeById(); searchEmployeeByName(); } ...

angulartypescriptmultiple-inheritancemixins

When trying to pass props into setup using VueJS 3 Composition API and TypeScript, an error may occur stating: "Property 'user' does not exist on type"

I need help figuring out why TypeScript is not recognizing that props.user is of type UserInterface. Any advice or guidance would be greatly appreciated. You can reach me at [email protected], [email protected], [email protected]. This seem ...

typescriptvue.jsvuejs3quasar-frameworkvue-composition-api

Is there a method to ensure the verification of dependency versions prior to executing npm build/yarn run build?

Seeking Solution. In the process of collaborating with a team on a JavaScript application, we occasionally encounter issues where certain dependencies get updated without our knowledge. This can lead to defects in the application after deployment. Is the ...

node.jsnpmyarnpkg

The implementation of TypeScript 3.5 resulted in a malfunction where the imported namespace was unable to locate the Enum during runtime

I recently upgraded an older Angular.js application from Typescript 2.7 to 3.5 and successfully compiled it using tsc.exe. During application runtime, I encountered an error message in certain parts of the code: TypeError: Cannot read property 'Enu ...

typescriptimportnamespaces

There are no properties associated with this particular data type

As someone who is new to TypeScript, I am encountering two issues with data types. This snippet shows my code: const say: object = { name: "say", aliases: [""], description: "", usage: "", run: (client: ob ...

node.jstypescriptdiscorddiscord.js

What is the process for refreshing the component content in Angular 2?

There was a moment during execution when my URL had the following appearance: http://localhost:4200/personal/51c50594-a95c-4a18-ac7b-b0521d67af96 I desire to visit a page with a different GUID and different content. http://localhost:4200/personal/{other ...

javascriptangularcomponentsangular2-routing

The generic type does not narrow correctly when using extends union

I'm working with the isResult function below: export function isResult< R extends CustomResult<string, Record<string, any>[]>, K extends R[typeof _type] >(result: R, type: K): result is Extract<R, { [_type]: K }> { ...

typescript

What is the best way to save the content of an RFC822 message body as a String?

let inbox = require("inbox"); let client = inbox.createConnection(false, "imap.gmail.com", { secureConnection: true, auth:{ user: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99f4e0fcf4f8f0f5d9fef4f8f0f5b7fa ...

javascriptnode.jsnpminbox

Angular seed appears to experience a hiccup when the "Loading..." screen persists after the incorporation of a router-outlet

When working on a new Angular seed application using ng new, I encountered an issue where the application would get stuck at "Loading..." after adding the following to app.component.html: <router-outlet></router-outlet> In an attempt to resol ...

angulartypescriptangular-routingrouter-outlet

Navigating through errors in my Dockerfile while running Angular

As a complete novice in the world of Docker (although quite comfortable with the rest of my tech stack), I followed along with the Docker guide and ended up with this Dockerfile: FROM angular/ngcontainer:latest WORKDIR /ClientApp COPY . . RUN npm install - ...

angulardockernpmdockerfile

Loading images in NodeJS is a common task that many developers encounter

I am relatively new to NodeJs and I am encountering a challenge with displaying images in NodeJs. I have reviewed my code thoroughly but still can't seem to figure out the issue. exports.sendWelcomeEmail = functions.auth.user().onCreate((user) => ...

node.jsfirebasenpmgoogle-cloud-functionsnodemailer