Angular 13 and Karma: ReferenceError: global is not defined

user_13396103 0
Viewed 1043

i know there are many posts on this subject but nothing has helped so far. Such things like (window as any).global = window in polyfills.ts didn't work

  • Angular: v13.3
  • Webpack: v4.0.2
  • Webpack CLI: v4.9.2
  • Jasmine core: v3.6.0

Excerpt from the package.json:

    "karma": "^6.3.9",
    "karma-chrome-launcher": "3.1.1",
    "karma-cli": "2.0.0",
    "karma-coverage": "^2.2.0",
    "karma-firefox-launcher": "1.1.0",
    "karma-jasmine": "4.0.0",
    "karma-jasmine-html-reporter": "1.5.0",
    "karma-junit-reporter": "1.2.0",
    "karma-mocha-reporter": "2.2.5",
    "karma-teamcity-reporter": "1.1.0",
    "karma-webpack": "4.0.2",

Error message:

Firefox 88.0 (Ubuntu 0.0.0) ERROR
  An error was thrown in afterAll
  ReferenceError: global is not defined
  22161@http://localhost:9876/_karma_webpack_/vendor.js:100738:25
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  55801@http://localhost:9876/_karma_webpack_/vendor.js:100494:38
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  54603@http://localhost:9876/_karma_webpack_/vendor.js:102262:36
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  48370@http://localhost:9876/_karma_webpack_/vendor.js:152925:84
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  32168@http://localhost:9876/_karma_webpack_/vendor.js:187:89
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  21391@http://localhost:9876/_karma_webpack_/main.js:6289:94
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  66820@http://localhost:9876/_karma_webpack_/main.js:6200:102
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  webpackContext@http://localhost:9876/_karma_webpack_/main.js:172720:9
  10116@http://localhost:9876/_karma_webpack_/main.js:171069:16
  __webpack_require__@http://localhost:9876/_karma_webpack_/runtime.js:23:42
  __webpack_exec__@http://localhost:9876/_karma_webpack_/main.js:173796:67
  @http://localhost:9876/_karma_webpack_/main.js:173797:70
  __webpack_require__.O@http://localhost:9876/_karma_webpack_/runtime.js:60:23
  @http://localhost:9876/_karma_webpack_/main.js:173798:56
  webpackJsonpCallback@http://localhost:9876/_karma_webpack_/runtime.js:167:46
  @http://localhost:9876/_karma_webpack_/main.js:1:65

It worked with Angular v12, but not with Angular v13.

Is more information needed? Has someone any idea?

Thanks in advance and regards

Filout

karma-jasmine angular webpack
4 Answers

Here's the solution that worked for me. I created a polyfills.js for my project and included it using the files property in karma.conf.js.

In my case I couldn't insert a polyfills.ts in angular.json because this project is built using ng-packagr, which doesn't support polyfills by design.

karma.conf.js with polyfills.js

user_45184680

I have been dealing with a similar issue for a while myself (the error was similar but not exactly the same), and the problem for me was the Intl package being imported in the polyfills.js file doing some weird things trying to use global but in a private context (so I just removed the import line since is not required for me).

It was not easy to track down but what I could do to debug this is while having the ng test running, open the "http://localhost:9876" uri on the browser, and then check on the source file where the error is happening. Also sometimes changing from Firefox to Chrome gives a better debug info, just in case you can try switching for a sec to see if that helps a little bit.

Best of luck!

user_13591290

The response of HankScorpio didn't work for me either, I had to do the following:

  • First, create a global-variables.ts (or whatever name you want) and add (window as any).global = window to it.
  • Then, go to polyfills.ts and import that file at the top.

The solution is almost the same, but the difference for me is that the files imported from the karma.conf.js were being executed after the error, so the variable was not being created properly.

user_77676350

The best thing to do is probably to remove the source of window.global, as there's no real advantage to using it within modern Angular applications, from what I can see.

If the problem is that you're dependent on an external package that is utilizing window.global, it could be worth contacting the maintainer.

Alternatively, if it's only failing in karma then maybe there's some way of mocking it in your tests through the testbed, though it's hard to give any specific advice given how little information there is to go on here

user_30362570
Related