ngx-dnd: Angular 6: Uncaught ReferenceError: global is not defined

[x] bug report

Current behavior After upgrading to angular 6 and making a production build my application does not work anymore and in the console of the browser following error appears: Uncaught ReferenceError: global is not defined

Expected behavior Application works without errors

Reproduction of the problem I am using version 4.0.1 of swimline ngx-dnd and angular 6.0.2, it works with ng serve, but not with a production build Create a new Angular Project with the Angular cli (6.0.3), ng new mytest, add the swimlane dnd library (4.0.1) and use e.g. the ngx-dnd-container component in the template, make a prod build and open the app

This is a known issue after upgrading to angular 6: https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 27 (7 by maintainers)

Links to this issue

javascript - Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined" - Stack Overflow

Most upvoted comments

I had the same issue concerning the

import ‘intl’;

in polyfills. The solution proposed in https://github.com/angular/angular-cli/issues/8160#issuecomment-386153833 did not fully resolve my situation.

For me the problem was that all the imports in polyfill.ts were hoisted and executed before I could initialize

(window as any).global = window;

Solution:

I put the above line

(window as any).global = window;

in a new empty file called “global-shim.ts” and imported it at the very top of polyfill.ts:

import 'global-shim';

+49

tobias74 on May 29, 2018

adding this line in to pollyfills.ts fixed my problem (just a workaround as @Gerros said)

(window as any).global = window;

+15

kemalbirinci on Jun 21, 2018

It worked for me. In index.html <script> if (global === undefined) { var global = window; } </script>

https://github.com/aws-amplify/amplify-js/issues/678

+13

marcionitao on Aug 12, 2018

Add blow code in index.html

1011RKP on Jan 18, 2019

To me the final solution was using an other library. https://github.com/RubaXa/Sortable worked great.

hugo-dlb on Oct 5, 2018

same problem here once i use import 'intl'; in polyfills

mhmo91 on May 24, 2018

I was able to reproduce it. Fixing #84 created error #86. By fixing #86 now it shows:

Uncaught ReferenceError: global is not defined
    at Object../node_modules/custom-event/index.js (index.js:2)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/crossvent/src/crossvent.js (crossvent.js:3)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@swimlane/dragula/dragula.js (dragula.js:4)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@swimlane/ngx-dnd/release/src/services/drake-store.service.js (drake-store.service.js:1)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@swimlane/ngx-dnd/release/src/directives/ngx-droppable.directive.js (ngx-droppable.directive.js:1)
    at __webpack_require__ (bootstrap:76)

See https://github.com/angular/angular-cli/issues/8160#issuecomment-386153833 for details. I would love to help but I don’t see polyfills.ts in the project. @Hypercubed am I allowed to add angular-cli to this project and make this package AOT compatible?

ssuperczynski on May 23, 2018

@Hypercubed I just installed the package and got this error.

adammendoza on Jul 2, 2018

@Hypercubed I can confirm my app compiled correctly with ngx-dnd under angular6. But I had to put (window as any).global = window; in the polyfills.ts as @tobias74 mentioned above. Without polyfills modified, error appears in the Chrome console:

index.js:2 Uncaught ReferenceError: global is not defined
    at Object../node_modules/custom-event/index.js (index.js:2)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/crossvent/src/crossvent.js (crossvent.js:3)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@swimlane/dragula/dragula.js (dragula.js:4)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@swimlane/ngx-dnd/fesm5/swimlane-ngx-dnd.js (dragula.js:618)
    at __webpack_require__ (bootstrap:76)
    at Object../src/app/ngx-easy-table/components/base/base.module.ts (base.component.ts:33)
    at __webpack_require__ (bootstrap:76)

ssuperczynski on Jun 19, 2018

The fix gives me some weird errors.

zone.js:2969 GET http://localhost:4200/container.component.html 404 (Not Found) zone.js:2969 GET http://localhost:4200/item.component.html 404 (Not Found)

And the application does not start anymore. It’s sad to see not a single drag and drop library supports Angular 6

hugo-dlb on Jun 9, 2018

I had the same issue concerning the

import ‘intl’;

in polyfills. The solution proposed in angular/angular-cli#8160 (comment) did not fully resolve my situation.

For me the problem was that all the imports in polyfill.ts were hoisted and executed before I could initialize

(window as any).global = window;

Solution:

I put the above line

(window as any).global = window;

in a new empty file called “global-shim.ts” and imported it at the very top of polyfill.ts:

import 'global-shim';

This solution worked for me in Angular 7 project. Thanks 😃

zensarCompass on May 21, 2019

the “fix” to add the global yourself is just a workaround… would be nice, if we could get a proper solution/fix… for more information: https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814

Gerros on Jun 9, 2018