Angular 17 : ReferenceError: fetch is not defined

Introduction

Are you frustrated by the message, ‘ReferenceError: fetch is not defined,’ every time you create Angular projects? This guide has a cure to your vexation. The release of Angular 17 has sure brought some advanced features but along with it certain challenges for the developers as well. 

Through this comprehensive tutorial, you will dive deep into the root cause of why this error happens in the first place and get step-by-step methods to resolve this issue. The simple guidelines in this manual will help you fix the problem. Utilize them to find the bug that’s keeping you from getting ahead with your projects and prepare to get back on track with your Angular projects that were put on hold.

In this article you will solve the ReferenceError: Fetch Is Not Defined Error which is coming in Angular 17 with node version above 18. Let's get started

The Problem:

The problem which I face in Angular 17 is when I make the SSR (Server Side Rendering ) build of my project and deploy it to the cloud AWS (Amazon Web Services). The project is working fine and the routing is working fine when I route from the website with routerLink but When I paste a blog url in the search bar it shows me "Reference Error : Fetch Not defined". The error which is coming in the server files which are generated in the build. I was very confused about where I should fix this error. Because of this error the website index pages are de-indexing from the google search console as it is not crawling the page. Also I searched for this error on google and tried many solutions on the internet but none of the solutions works for me . After Spending so much time on this error I finally fixed the error.

The Solution:

The Angular 17 Build consists of 2 folders one is Browser which is a client side and other is server which is for server side. When the Angular page load it start from the server side and then load to client side so the build which is generating by the command "NG BUILD" having many server file in which some file are using fetch which is a browser api and the server file loaded in node js environment then i realize that i think the fetch is unavailable in the server side. What i do is go to the vscode and open the terminal and install a node-fetch package by this command "npm i node-fetch" and then open the server.ts file in the angular project. Add the below code in the server.ts file and then rebuild the project and boom the error is fixed.

import fetch from 'node-fetch'

(global as any).fetch = fetch;

This will create a fetch api for the server side and it will not cause any error. If you have any query feel free to contact.

Conclusion

This guide has equipped you with all the tools you need to resolve the complications that are holding you back from working on the Angular 17 framework. Fix the ReferenceError showing fetch is not defined using the helpful tips and simple procedures within this manual and revive the free flow of your Angular program.

Note : My node version is above 18 and Angular version is 17 (latest).