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

Angular, Observable, and the wonders of debounceTime

I have a function within an Angular 4 project called reload() that can be triggered by other functions, A() and B(), at any given time. I am looking to implement a debounce feature for reload() so that it is only executed after a specified duration (X mill ...

angularrxjsobservabledebouncing

Trouble with HTTP.GET Request within a Previous Event Situation

Whenever I attempt to use a previous event to fetch data from my API, the information seems to disappear once outside the subscribe block. I experimented with relocating the service outside of the component, but encountered the same issue. myObject :S ...

angularangular7

Utilizing String.Format in TypeScript similar to C# syntax

Is there a way to achieve similar functionality to String.Format in C# using TypeScript? I'm thinking of creating a string like this: url = "path/{0}/{1}/data.xml" where I can substitute {0} and {1} based on the logic. While I can manually replace ...

typescript

Troubleshooting a Pulumi script in Azure using Typescript and encountering difficulties with function writing

My background is in using terraform, but now I am trying out Pulumi/typescript for the first time. In my codebase, I have two files - index.ts and blob.ts. The create function in blob.ts is responsible for creating a storage account, resource group, blob ...

typescriptazurepulumi

Tips for utilizing chodorowicz / ts-debounce effectively

Looking to utilize the debounce function provided by the ts-debounce package (available at here) in my typescript project. However, struggling to find a concrete example of its usage in typescript. Would greatly appreciate any help or guidance on this ma ...

angulartypescriptalgorithmfunctiondebouncing

What are the steps for integrating superagent (or any other request library) into a Serverless Framework AWS Lambda function?

Is there a way to enable network requests in my lambda function? Below is the provider information: provider: name: aws runtime: nodejs10.x The project has package.json and node_modules at its root. I am trying to include superagent with the follow ...

node.jsamazon-web-servicesnpmaws-lambdaserverless

What is the best approach to testing the React Hook "useEffect" that is used to make an API call with Typescript?

Currently, I am working on writing Jest-enzyme tests for a basic React application using Typescript along with the new React hooks. The main issue I am facing is with properly simulating the api call made within the useEffect hook. Within the useEffect, ...

typescriptjestjsaxiosenzymereact-hooks

How to manipulate dates using Angular 2's date pipe to add or subtract hours

I am encountering an issue with the new Angular 2 Date Pipe. My date value is as follows: let myDate = '2017-01-31T17:53:36' When I use the Date Pipe to format it in the view like this; {{myDate | date: 'dd/MM/yyyy HH:mm' }} It dis ...

dateangularfilterpipe

Why is my CSS export missing in the Shareable Vite/Vue component error message?

I have been closely following a tutorial on building a shareable Vue component using Vite and testing it by linking it into another project. The process involves building with Vite through 'npm run build' and then linking the component. However, ...

vue.jsnpmcomponentsvite

Utilize a variable within an HTML attribute

Currently utilizing Angular and I have the following HTML snippet <input onKeyDown="if(this.value.length==12 && event.keyCode!=8) return false;"/> Is there a way for me to incorporate the variable "myNum" instead of the ...

javascripthtmlangular

When executing the npm install command for a local package, every file is incorporated

Setting up my local module involves installing it with npm install --save ../path/to/my/project. During the installation process, all the source files are being populated in the node_modules/my_project directory instead of just the dist/ folder as specifi ...

node.jsnpm

Using textContent as an input attribute in Angular results in an error

One of my recent projects involved creating a directive wrapper for strokeText.js, which allows for text to have an outline added to it using the canvas api. In some instances, I needed to apply this effect to dynamic text that changes based on user input. ...

angularangular5

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

Exploring the capabilities of chromaprint.js within a web browser

I'm currently in the process of developing a music streaming platform and I'm looking to include the chromaprint.js library for deduplication purposes. In my workflow, I utilize browserify and gulp. Despite the fact that the library claims it ca ...

javascriptnode.jsnpmgulpcoffeescript

What are the ways in which Angular can offer assistance to Internet Explorer 9?

The news is out - the Angular team has just announced their support for Internet Explorer 9! This revelation has left me wondering, how is it even possible? Currently, I am an avid user of AngularJS and have dedicated time to studying its ins and outs. Fr ...

javascriptangularjsangularinternet-explorer-9

Keep displaying the default angular loading screen until the angular2 router is fully resolved

Angular2 CLI has a default loading screen that displays until the app gets bootstrapped with <app-root>Loading...</app-root>. Once this is done, the Angular2 route resolver makes an API call to verify whether the user is authenticated before n ...

angularangular2-routing

What are the reasons for deprecating bindToController in Typescript?

When I am creating an AngularJS directive using TypeScript, I typically use the bindToController property to bind parameters to the controller for easy access. export class MyDirective implements IDirective { controller = MyController; controllerA ...

angularjstypescriptbinding

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

javascriptangulartypescriptangular-material

The ngModel feature is not functioning properly when trying to update in tag inputs

I am having trouble with two-way data binding using ngModel in tag-inputs. Can someone please assist me? Here is the link to my code on StackBlitz ...

angular

How can I utilize the Redux store outside of a component in a React application with ASP.NET Core and TypeScript?

While I have some experience with React, I am new to using Redux. Luckily, Visual Studio 2017 comes with a built-in template for React + Redux under .NET Core 2.0. About my environment: Visual Studio 2017 React 15.6.1 TypeScript 2.4.1 Redux 3.7.1 Rea ...

reactjstypescriptasp.net-coreredux