xaviergonz / js-angusj-clipper

Polygon and line clipping and offsetting library (Javascript) - a port of Angus Johnson's clipper
MIT License
162 stars 19 forks source link

Compatability with Angular 6. #2

Closed Rlcolli4 closed 6 years ago

Rlcolli4 commented 6 years ago

Steps to reproduce: Create a project using Angular-cli v. 6.0.8, Angular 6.0.3, RxJS 6.2, and typescript 2.7.2. Install the latest version of js-angusj-clipper (I tried both 0.19 and 0.18) Run npm start

You will see the following error: ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper-wasm.js Module not found: Error: Can't resolve 'fs' in 'B:\dev\github\angular5-canvas-dr awer\node_modules\js-angusj-clipper\dist\wasm' ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper.js Module not found: Error: Can't resolve 'fs' in 'B:\dev\github\angular5-canvas-dr awer\node_modules\js-angusj-clipper\dist\wasm' ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper-wasm.js Module not found: Error: Can't resolve 'path' in 'B:\dev\github\angular5-canvas- drawer\node_modules\js-angusj-clipper\dist\wasm' ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper.js Module not found: Error: Can't resolve 'path' in 'B:\dev\github\angular5-canvas- drawer\node_modules\js-angusj-clipper\dist\wasm'

On compiling it is trying to find "fs" when compiling clipper but it doesn't seem to want to work. The clipper did work in Angular 5.2 which our application was running in before trying to update Angular. Any help or insight would be appreciated.

xaviergonz commented 6 years ago

It seems to be because the code the wasm compiler injects does (in case you are running inside node js)

var fs = require('fs')
if (!fs) ....

and now angular 6 cli / webpack tries to be smarter than usual and assumes that module is required for sure

see here https://github.com/angular/angular-cli/issues/10681

I'd be happy to fix it, but it might be complex since that piece of code itself actually comes like I said from emscripten (the c++ to wasm compiler) and not from myself directly, so probably the best place to put the issue is actually there https://github.com/kripken/emscripten

I think I saw some workarounds on that issue though.

xaviergonz commented 6 years ago

That being said, if you want a dirty fix just remove the following piece of code from both clipper-wasm.js and clipper.js that is inside node_modules/js-angusj-clipper if(!nodeFS)nodeFS=require("fs");if(!nodePath)nodePath=require("path"); and I think it should work, but only as long as you don't update the library / reinstall node modules, (which could be modified in a postinstall step with a custom script to avoid that)

Rlcolli4 commented 6 years ago

Thanks, it isn't super urgent we upgrade to 6 at the moment so I think we will revert back to 5.2 in the meantime.

I appreciate the quick response, we've loved using this plug in in our app! Hopefully emscripten makes changes soon.

Rlcolli4 commented 6 years ago

Good afternoon, any update on getting this compatible with Angular6? We are looking to upgrade our app before Angular 7 comes out and wanted to see if anything had changed with your latest pushes.

EDIT (8/6/2018): It appears that things like 'fs' and 'path' will no longer be supported in Angular (See Here, look for the response from filipesilva on March 1). I also posted this in the emscripten issue I reported.

xaviergonz commented 6 years ago

@Rlcolli4 I just released v0.20.0

// import it with
import * as clipperLib from "js-angusj-clipper"; // es6 / typescript
// or
const clipperLib = require("js-angusj-clipper"); // nodejs style require

// or if you want the non-universal web-only version (for example for angular 6+)
// import it with
import * as clipperLib from "js-angusj-clipper/web"; // es6 / typescript
// or
const clipperLib = require("js-angusj-clipper/web"); // nodejs style require

let me know how it goes

Rlcolli4 commented 6 years ago

I will give this a try! I actually had just forked the project and created a node js file that would remove the line we talked about earlier. You can check it out here: https://github.com/Rlcolli4/js-angusj-clipper

I'll let you know how the new version goes!

Rlcolli4 commented 6 years ago

Just tried the install and start up, it worked great! However, it looks like the import path for the web should be import * as clipperLib from "js-angusj-clipper/dist/web"; as that allowed me to actually reference the web portion. Thanks again for your support and quick reply

xaviergonz commented 6 years ago

glad it worked :) I will release a v0.20.1 later that will make the import from /web rather than from /dist/web

xaviergonz commented 6 years ago

there, v0.20.1 released :) feel free to close the issue if everything is ok!