Uncaught ReferenceError: global is not defined in Angular

L

7

6

I am upgrading an existing Angular application to Angular 15. I am receiving the following error in the browser:

index.js:43 Uncaught ReferenceError: global is not defined
    at 34768 (index.js:43:30)
    at __webpack_require__ (bootstrap:19:1)
    at 92634 (AuthenticationDetails.js:65:4)
    at __webpack_require__ (bootstrap:19:1)
    at 53843 (UserAgent.js:19:25)
    at __webpack_require__ (bootstrap:19:1)
    at 48562 (vendor.js:26:84)
    at __webpack_require__ (bootstrap:19:1)
    at 88951 (auth.module.ts:8:25)
    at __webpack_require__ (bootstrap:19:1)

This used to be solved by adding the below to polyfills.ts

(window as any).global = window;

I believe this file has been removed from Angular 15. How do I solve this error now?

I tried creating a polyfills.ts without any success

Lambert answered 26/11, 2022 at 5:6 Comment(0)

G

4

According to this PR, you should put this in a file and point to it in your angular.json under a polyfills array. Example:

// other stuff in the angular.json
polyfills: [ "./window-global-fix.ts" ],

Gunter answered 26/11, 2022 at 5:36 Comment(0)

U

4

I was configuring Angular 15 with AWS Amplify following available online tutorials when I came across this issue. The provided answer above ultimately revealed what I needed to do so I upvoted the above answer. I'm putting this here for quick-reference for anyone who comes across similar Angular15+Amplify issue.

1.) Create some kind of file to act in place of "pollyfill.ts"

Angular-Project / src / main / webapp / src / aws-pollyfill-like-file.ts

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

2.) Add to tsconfig.app.json

Angular-Project / ... / webapp / tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  ...
  },
  "files": [
    "src/aws-pollyfill-like-file.ts",
    "src/main.ts"
  ],
  ...
}

3.) Add to angular.json

Angular-Project / ... / webapp / angular.json

{
  "$schema": ...,
  ...
  "projects": {
    "angularclient": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "polyfills": [
              "zone.js",
              "src/aws-pollyfill-like-file.ts"
            ],
          ...
          },
        ...
        },
      }
    }
  }
}

Unbidden answered 17/3, 2023 at 20:25 Comment(5)

thnx for this, i've read a million different suggestions similar to yours and until now I was adding the polyfill.ts to the files list in tsconfig.json (not app). will this be necessary in tsconfig.spec.json ass well (for the tests to find global? or is it simply for the browser?) – Minny 26/3, 2023 at 15:15

I am not, yet, running tests in Angular, so I am not aware of necessarily having/needing it in the tsconfig.spec.json to enable tests to execute properly, are you having issues with running tests that you weren’t having before you made changes? – Unbidden 27/3, 2023 at 20:2

You were probably following the same tutorial as I was. I forgot to add the <script> var global = global || window; </script> in the head element of index.html. It's a weird addition required by AWS Amplify. He said it too, I just forgot. – Syndactyl 2/5, 2023 at 15:14

Work in Angular 16 – Stele 11/10, 2023 at 15:47

very complete answer! Thx – Mudstone 20/10, 2023 at 17:28

C

4

easier way is just include

  <script>
    if (global === undefined) {
      var global = window;
    }
  </script>
    <head>

before head tag

Cottingham answered 10/8, 2023 at 15:37 Comment(1)

This is the easiest way to do this 👍🏼 – Stele 11/10, 2023 at 16:5

J

3

I tried few mentioned solutions here, but not working for me.

This worked for Angular 17. Try your luck. :)

// in main.ts
(window as any).global = window;

Joel answered 28/2, 2024 at 21:29 Comment(0)

B

1

just add this to index.html that's how I got it fixed

<script>
      const global = globalThis;
</script>

Bewray answered 13/12, 2023 at 8:32 Comment(0)

I

1

This one worked for me and it is very simple. Just in my index.html file I added this this script tag in the body :

<script>let global=window;</script>

Enjoy

Isochromatic answered 5/9, 2024 at 20:19 Comment(0)

P

0

For me it was this import causing the error

import { show } from "cli-cursor"

Polad answered 29/5, 2024 at 19:13 Comment(0)

Recommended topics

Hot tags