chartist icon indicating copy to clipboard operation
chartist copied to clipboard

Published 20 hours ago • verified publisher icon chartist-js

Angular 8 - global is not defined

Open yohny opened this issue 6 years ago • 6 comments

I recently migrated an Angular 7 application (that was using chartist) to Angular 8. After migration the app no longer works with the following error in console: Uncaught ReferenceError: global is not defined at chartist.js:1173 Screenshot from 2019-09-21 19-01-28

chartist version 0.11.4

It seems that Angular CLI removed shim for global https://github.com/angular/angular-cli/issues/8160#issuecomment-386153833 reasoning here: https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814 and library authors should not rely on it any more.

workaround mentioned in first linked issue works, but its still just a workaround that is mentioned nowhere in chartist documentation (and ideally should not be required)

yohny avatar Sep 21 '19 17:09 yohny

I found this walk around:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>
      window.global = window;
  </script>
</head>
<body>
<app-route></app-root>
</body>
</html>

blueskyfish avatar Sep 21 '19 21:09 blueskyfish

Any idea why it was removed? I suppose we can just add it back in, but there's a lot of bad code out there that still needs to be used :)

mcblum avatar Sep 26 '19 21:09 mcblum

This has just affected a project I'm working on - I've had to lock myself to Chartist 0.11.0 until it's fixed.

dansoper avatar Nov 05 '19 11:11 dansoper

https://stackoverflow.com/questions/50356408/upgrading-to-angular-6-x-gives-uncaught-referenceerror-global-is-not-defined

Client

visconti-muc avatar Nov 24 '19 13:11 visconti-muc

@gionkunz Would be nice if we could have a fix for this soon.

Options:

 })(typeof global !== 'undefined' && global ||
    typeof window !== 'undefined' && window || this);

or use globalThis that is available in Chrome and Node 12

or use one o the globalThis polyfills https://github.com/ungap/global-this

hansmaad avatar Nov 25 '19 07:11 hansmaad

Just FYI if you import chartist into a component and that component has imported into seperate module files (such as layout.module.ts and app.module.ts) you will get this error. The solution is choose one of these files -higher app.module or lower component.module-.

kahve6 avatar Sep 08 '20 00:09 kahve6