angular universal, d3, ERROR ReferenceError: fetch is not defined

Question

This problem also occurs in angular universal:

I try to install node-fetch-polyfill and import it.

//npm install node-fetch-polyfill

import * as fetch from "node-fetch-polyfill"; 

ngOnInit() {
    if (typeof fetch !== 'function') {
      (global as any).fetch = fetch;
    }
}

But it still doesn't work, I don't use fetch directly in my code.

The documentation seems to suggest this is meant to be used with node.js. Are you sure it supports Angular ? — Delwyn Pinto, Feb 04 '20 at 09:37
@DelwynPinto I'm not sure, but this is the solution I can find so far. — Finn, Feb 05 '20 at 05:11

score 0 · Answer 1 · answered Feb 04 '20 at 09:34

Documentation said:

A light-weight module that brings window.fetch to Node.js

So I assume you would like to use the fetch only in server, so you should check whether you are on server or on client. Like this for eg:

if (typeof window !== 'undefined' && typeof fetch !== 'function') {
  (global as any).fetch = fetch;
}

BUT! The best if you use PLATFORM_ID!

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser} from '@angular/common';
export class MyComponent {
    isBrowser: boolean;
    constructor(
        @Inject(PLATFORM_ID) platformId: string) {
            this.isBrowser = isPlatformBrowser(platformId);
    }
    ngOnInit() {
       if (!this.isBrowser && typeof fetch !== 'function') {
        ...
     }

angular universal, d3, ERROR ReferenceError: fetch is not defined

1 Answers1