Angular-cli: Third party library fails after upgrade cli

[julianobrasil]

Versions

Angular CLI: 6.0.0-rc.3
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0-rc.4
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cdk: 6.0.0-rc.2
@angular/cli: 6.0.0-rc.3
@angular/flex-layout: 5.0.0-beta.14
@angular/material-moment-adapter: 6.0.0-rc.2
@angular/material: 6.0.0-rc.2
@angular-devkit/architect: 0.5.5
@angular-devkit/build-angular: 0.5.5
@angular-devkit/build-optimizer: 0.5.5
@angular-devkit/core: 0.5.5
@angular-devkit/schematics: 0.5.5
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 6.0.0-rc.3
@schematics/angular: 0.5.5
@schematics/update: 0.5.5
typescript: 2.7.2
webpack: 4.5.0

Repro steps

• Install ng2-dragula
• run ng serve: no errors
• Try to open the app and take a look at the console to see the error message (complaining about Uncaught ReferenceError: global is not defined) while the app doesn't run

Observed behavior

index.js:2 Uncaught ReferenceError: global is not defined
    at Object../node_modules/crossvent/node_modules/custom-event/index.js (index.js:2)
    at __webpack_require__ (bootstrap:74)
    at Object../node_modules/crossvent/src/crossvent.js (crossvent.js:3)
    at __webpack_require__ (bootstrap:74)
    at Object../node_modules/dragula/dragula.js (dragula.js:4)
    at __webpack_require__ (bootstrap:74)
    at Object../node_modules/ng2-dragula/components/dragula.class.js (dragula.class.js:2)
    at __webpack_require__ (bootstrap:74)
    at Object../node_modules/ng2-dragula/index.js (index.js:2)
    at __webpack_require__ (bootstrap:74)

Desired behavior

@angular/cli shouldn't insert any errors (look in the next item - below -that @angular 6.0.0-rc.0 and @angular 6.0.0-rc.4 work right with @angular/cli 1.7.4). At some point ( @angular 6.0.0-rc.1) angular itself was preventing dragula from work. But this behavior introduced in rc.1 was changed in rc.4. Now only @angular/cli 6.0.0-rc.x is preventing dragula from work in a full upgraded project.

Mention any other details that might be useful (optional)

@angular/cli 1.7.4 + @angular 6.0.0-rc.0 => works
@angular/cli 1.7.4 + @angular 6.0.0-rc.1 => fails
@angular/cli 1.7.4 + @angular 6.0.0-rc.2 => fails
@angular/cli 1.7.4 + @angular 6.0.0-rc.3 => fails
@angular/cli 1.7.4 + @angular 6.0.0-rc.4 => works

• @angular/cli 6.0.0-rc.x + @angular 6.0.0-rc.x => fails with all of 6.0.0-rc angular versions

There's a repo available here: https://github.com/julianobrasil/material2-test/tree/dragula

Just take away DragulaModule from app.module.ts and the app runs without errors.

There's already an issue opened at dragula's repo on this subject: https://github.com/valor-software/ng2-dragula/issues/849

[clydin]

This is an issue caused by the library in question assuming the presence of node functionality within a web browser.

For further details, please see this comment: https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814

[julianobrasil]

@clydin, so I should close this issue. I'll put a link to #9827 on dragula's repo.

[mohammedzamakhan]

@julianobrasil but that link says that the library will have to fix the issue too. Why are we closing the issue?

[julianobrasil]

@mohammedzamakhan, I'm considering that it is an issue to be fixed by dragula (which would be the "library" that comment is referring to), not by @angular/cli team.

[lukica88]

Try adding (window as any).global = window; in polyfills.ts

[julianobrasil]

This worked for me: https://github.com/valor-software/ng2-dragula/issues/849#issuecomment-385518621

[bevlison]

Try adding (window as any).global = window; in polyfills.ts
worked for me, however I'd like to understand what it does

[cunneyt]

@lukica88 that's worked for me, thank you!
i tried to add path in tscongig.json but didnt work.

[RoopeHakulinen]

@bevlison It simply adds a new property called global to the existing window object so that it can be accessed as window.global or just global (since in browser names are looked up from the window object if not found elsewhere). If it was just JS, we would not need the as any so it would look as simple as window.global = window;.

It is located in polyfills.ts so that it will be included in the very beginning of the JS bundle produced by the build process. It could also in some other places but that is just a common location to put it in.

The actual cause for this problem is in the library which is assuming there is something called global available in the execution environment. Why they do assume this then? Because it is available always in Node.js which the library is probably targeting.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}