Uncaught ReferenceError: global is not defined in Angular

Question

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

Answer 1

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" ],

Answer 2

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"
            ],
          ...
          },
        ...
        },
      }
    }
  }
}