angular-cli: [bug] Uncaught ReferenceError: global is not defined

On version 6 of Angular CLI we are removing the shim for global and other node built-ins. You can read more about why this change was made in https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814.

If you are using a library that assumes these globals are present, you can try manually shimming it inside your polyfills.ts file:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

I ran a quick test with socket.io-client and this seemed to allow it to run.

It seems that all the import-statements in the polyfill.ts are hoisted in the compiled polyfill.js. Therefore putting

(window as any).global = window;

at the top of the file polyfill.ts did not solve the issue for me, since in the compiled polyfill.js this command was located at the very end of the file (after all the imports).

Solution

I had to put the line

(window as any).global = window;

in a new file (for example “global-shim.ts”)

and import this file at the very top of the polyfill.ts

import 'global-shim';

In my polyfills.ts, the import references to intl were still there. Comment out or delete these if you get stuck, then add (window as any).global= window as @filipesilva stated above.

Same problem here since 1.5.0-rc.3, with 1.5.0-rc.2 no problems…

declare var $: any; I am getting the error $ not defined

• I tried adding (window as any).global = window; to pollyfils.ts, but it didn’t work.
• reverting to 1.5.0-rc.1 worked

This is definitely related to https://github.com/angular/angular-cli/pull/8132 as we’ve removed the node global object from the compilation environment. I’m investigating what can be done about it.

Hi, I am using Dragula version 1.5.0 with Angular 5, and still having problem "ReferenceError: global is not defined"

I have just installed it, imported and added to NgModule -> Imports, and my app crashes with this error.

Is there any step I am missing??

Just wanted to let you know we’re looking into this. For the intl case using import 'intl/dist/intl'; instead fixes it, but this might not be possible for all libs. socket.io-client also seems to have a dist in socket.io-client/dist/socket.io.js. I don’t think the same can be used with ng-socket-io however, since it’s importing the node package inside of it…

This is fixed for me with release 1.5.0-rc.8 (https://github.com/angular/angular-cli/pull/8250). Thanks!

There’s a pull request which I assume will fix it guess we just need to wait for it to be added

https://github.com/angular/angular-cli/pull/8189

@RicardoVaranda https://github.com/dottodot/ang5-test

All i’ve done is create a new project with 1.5.0-rc.3 and included import 'intl'; in polyfills.ts and you get the error

I seeing the same issue as well with ng-socket-io but also with import 'intl'; in polyfills.ts

Yes. global does not exist in a browser. A library that supports web browsers should not be using Node.js specific functionality.

Thanks that worked. I’ve gone back to 1.5.0-rc.2 and that’s ok for me so seems like the issue is in 1.5.0-rc.3

@willkara, read the comment right before yours.

Follow the stack trace to see which package uses global. submit an actionable, reproducible issue on that package repo

(also, “happens in new projects.” is very different from happened when you “tried adding a basic AwsAmplify”)

On version 6 of Angular CLI we are removing the shim for global and other node built-ins. You can read more about why this change was made in #9827 (comment).

If you are using a library that assumes these globals are present, you can try manually shimming it inside your polyfills.ts file:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

I ran a quick test with socket.io-client and this seemed to allow it to run.

Is this the right way of implementing socket.io in Angular 2? I mean does the above line give any side affects that may be obtrusive in the future?

I removed all these things. import 'intl'; (window as any).global = window; // Run npm install --save intl. import 'intl/locale-data/jsonp/en';

AND NOW 😄 This polyfill.ts is working for me.

`import ‘core-js/es6/symbol’; import ‘core-js/es6/object’; import ‘core-js/es6/function’; import ‘core-js/es6/parse-int’; import ‘core-js/es6/parse-float’; import ‘core-js/es6/number’; import ‘core-js/es6/math’; import ‘core-js/es6/string’; import ‘core-js/es6/date’; import ‘core-js/es6/array’; import ‘core-js/es6/regexp’; import ‘core-js/es6/map’; import ‘core-js/es6/weak-map’; import ‘core-js/es6/set’;

import ‘core-js/es7/array’;

/** IE10 and IE11 requires the following for NgClass support on SVG elements */ import ‘classlist.js’; // Run npm install --save classlist.js.

/** IE10 and IE11 requires the following for the Reflect API. */ import ‘core-js/es6/reflect’;

/** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import ‘core-js/es7/reflect’;

/**

• Required to support Web Animations @angular/common/animations.
• Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ import ‘web-animations-js’; // Run npm install --save web-animations-js.

/***************************************************************************************************

• Zone JS is required by Angular itself. */ import ‘zone.js/dist/zone’; // Included with Angular CLI.

/***************************************************************************************************

• APPLICATION IMPORTS */

/**

• Fix for ngx-chart to work on ie11 */ if ( typeof SVGElement.prototype.contains === ‘undefined’ ) { SVGElement.prototype.contains = HTMLDivElement.prototype.contains; }`