Issues with Parcel and Angular #68

alunacob · 2020-05-14T15:07:12Z

Has anyone being able to import the module in Angular?

I guess the issue comes from using parcel in a webpack environment, but I am just guessing.

It claims:

WARNING in ./src/assets/js/leaflet.glify/dist/glify.js 1:292-296
Critical dependency: the request of a dependency is an expression

and doesn't allow the Angular app to start

Niklas345 · 2020-07-20T10:09:52Z

Hey,

I had a similiar issue. To see if it was parcel or not, I cloned the repository and switched bundling to webpack. If bundled with webpack, the angular-cli is able to import the 'glify'

My knowledge about parcel is limited (non-existent, I didn't even know it exists up to today), so I can't say much about the reasons for it not working in tandem with webpack.

I can fork this repository to create a (maintained) webpack version - if the authors of this awesome library approve that!

robertleeplummerjr · 2020-07-20T12:25:07Z

I wouldn't mind switching. It'd be nice to know the cause.

Niklas345 · 2020-07-20T13:44:24Z

I can stitch together an angular sample that throws the given error. I did some reasearch (not too long, about 2 hours) today to find out about compatbilitiy issues, but I couldn't find any.

There are a few things I had to change to get the lib to compile with webpack, though:
From:

const glify = new Glify();
export default module.exports = glify;

to this:

const glify = new Glify();
export default glify;

I also had to replace the leaflet imports because tsc was refusing to use the leaflet-bindings.d.ts, claiming it couldn't resolve any type definitions for leaflet. Maybe one of these resultet in the issue?

On a totally different side note, I'm planning to write a texture-shapes.ts, is something like that already planned?

robertleeplummerjr · 2020-07-20T13:49:55Z

On a totally different side note, I'm planning to write a texture-shapes.ts, is something like that already planned?

What would it do?

Niklas345 · 2020-07-20T14:17:18Z

On a totally different side note, I'm planning to write a texture-shapes.ts, is something like that already planned?

What would it do?

I'd like to display arbitrary textures on squares, for now. Once I made sufficient progress, I'd like to open a PR for that.

Niklas345 · 2020-07-21T11:48:13Z

Hey,

so after a deep dive into Webpack and WebGL yesterday and today, I did 2 things:

Webpackified this library
Created the texture-marker

The webpack version now creates an esnext bundle together with typescript definitions (d.ts files). The development server is working, the only thing I havn't tried yet is the nodeJS version (because I didn't find a sample I could play around with for it).

Because of the explorative nature of my hacking yesterday, the webpackification and the texture-markers are a bit mixed up, but I could seperate them again and make a pull request for the webpack version if you are interested.

As for the texture markers...I'm not sure if they fit the concept of this library, as I tailored it to my needs:

I removed a couple of properties I no longer needed
I removed the scene-rending optimization (vertices are recalculated each rendering pass)
Rendering ~33k SVG images took around 200ms.

cwgrc2 · 2020-09-10T15:01:18Z

I am trying to get leaflet.glify working in our project. We have a need to speed up our graphics. After a day of having no luck and following the directions on the readme page, I still cannot get it to work.

Environment:

    "@angular-devkit/build-angular": "0.900.4",
    "@angular/cli": "9.0.4",
    "@angular/compiler-cli": "9.0.4",
    "ts-node": "8.3.0",
    "tslint": "5.18.0",
    "typescript": "3.7.5"
    "leaflet": "^1.6.0",
    "leaflet-draw": "^1.0.4",
    "leaflet-sidebar-v2": "^3.2.2",
    "leaflet.control.layers.tree": "^1.0.0",
    "leaflet.glify": "^3.0.0",

Windows 10

Following the direction on readme, I put this in my html file:

<html>
<body>
  <script src="dist/glify-browser.js"></script>
  <script>
    L.glify
  </script>
</body>
</html>

and this in my typescript:

import * as L from 'leaflet';
import glify from 'leaflet.glify';

... make points array....
...

      glify.points({
          map: this.map,
          data: geojsonFeature,
          click: (e, pointOrGeoJsonFeature, xy): boolean | void => {
            // do something when a point is clicked
            // return false to continue traversing
          }
      });

The web page won't even load and gives this error:

vendor.js:285083 Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/leaflet.glify/dist/glify-browser.js.parcelRequire.eMRn (vendor.js:285083)
    at Object../node_modules/leaflet.glify/dist/glify-browser.js (vendor.js:285083)
    at __webpack_require__ (runtime.js:80)
    at Module../src/app/basemap/DrawService.js (main.js:6208)
    at __webpack_require__ (runtime.js:80)
    at Module../src/app/basemap/basemap.component.ts (main.js:7029)
    at __webpack_require__ (runtime.js:80)
    at Module../src/app/app.routes.ts (main.js:5739)
    at __webpack_require__ (runtime.js:80)
    at Module../src/app/app.module.ts (main.js:5231)

Can you please advise how to proceed? I read some of the comments above, but not sure I follow it.

Thanks

Chris

Niklas345 · 2020-09-29T06:41:40Z

Hey @cwgrc2 ,

Sorry for the late reply, I was on vacation. I might be able to clear up a few things for you now.

Apparently, the library doesn't work together with angular 9/10, probably because of some incompatibility with webpack. We forked the library and switched it from parcel to webpack, and it worked.

If you want, I can dig into the commit history and create a patch for you. As an alternative, I could also fork this repository and push the commits used to bundle leaflet.glify with webpack. But this isn't really an optional solution.

You could try the following:

Clone this repository
Upgrade parcel and all parcel dependencies
Compile locally, change the version, and npm link the library
In your angular project, use the locally linked version

I would assume that might already fix the error. If thats the case, you can always push the fork to github and create a PR from it.

Good Luck!

robertleeplummerjr · 2020-09-29T11:32:02Z

@Niklas345, would you like commit access, and possibly be able to clear up the issue here?

cwgrc2 · 2020-09-29T18:40:09Z

@Niklas345

Thanks for replying. Is there any way you could make it work for Angular 9/10? I ask because you and Robert are the experts on this package and it would be best for the community to have it available for everyone.

If I try and do what you propose, I might succeed after hours (days?) and I suspect it would be something you could do quickly. I think it makes most sense for you to give it a shot. Again, I point to the documentation on this plugin and it claims it works for Angular, but, in reality, it needs to have this completed for that to be true.

Please let me know if you could get this to work, else I will have to try per your instructions and I might have questions. :-)

Thanks Niklas.

Chris Grant

Niklas345 · 2020-10-01T12:52:38Z

Hey all,

I had some time to dig into the original issue again, without any success. Parcel hasn't been updated for a while, as they seem to be working on parcel2, hence, updating the dependencies won't be much use.

I did some playing around, moving various dependencies from dev into the bundle without success.

Parcel is tracking the issue here: parcel-bundler/parcel#2883

@robertleeplummerjr No need for commit access for now. I don't have a solution yet!

Given the fact that parcel seems to be a bit unstable for now, would you approve of me making a PR of the webpack version? I might even be able to make it work with both webpack and parcel (two versions, one with -webpack in the name maybe?).

robertleeplummerjr · 2020-10-01T14:36:32Z

That'd be great @Niklas345 !

cwgrc2 · 2020-10-01T14:53:31Z

All I can say @Niklas345 is that me and my colleague anxiously await anything you can do to help us use leaflet.glify in our application. Thank you, and you too @robertleeplummerjr.

Chris

Niklas345 · 2020-10-04T08:29:21Z

I opened a PR, but I could need some help with the webpack bundle size.

cwgrc2 · 2020-10-30T16:36:42Z

@Niklas345 & @robertleeplummerjr

Just wondering if you have had any success on this? Would still love to use this in Angular 9/10.

Thanks, Chris

alunacob · 2020-10-30T17:07:25Z

I would really love to have this issue solved as well

alunacob · 2020-11-04T08:02:09Z

Hey @cwgrc2 ,

Sorry for the late reply, I was on vacation. I might be able to clear up a few things for you now.

Apparently, the library doesn't work together with angular 9/10, probably because of some incompatibility with webpack. We forked the library and switched it from parcel to webpack, and it worked.

If you want, I can dig into the commit history and create a patch for you. As an alternative, I could also fork this repository and push the commits used to bundle leaflet.glify with webpack. But this isn't really an optional solution.

You could try the following:

Clone this repository

Upgrade parcel and all parcel dependencies

Compile locally, change the version, and npm link the library

In your angular project, use the locally linked version

I would assume that might already fix the error. If thats the case, you can always push the fork to github and create a PR from it.

Good Luck!

I have tried this approach with no luck. The application (in dev mode using angular and hence webpack) ends up in a cryptic Javascript heap out of mem error.

It would be nice to have at least a temporary working approach to be able to use this library inside an angular project

<--- Last few GCs --->

[10408:000002538B0BECE0]   413297 ms: Scavenge 1315.4 (1423.2) -> 1314.6 (1424.2) MB, 4.9 / 0.0 ms  (
[10408:000002538B0BECE0]   413313 ms: Scavenge 1315.6 (1424.2) -> 1314.8 (1424.7) MB, 5.6 / 0.0 ms  (
[10408:000002538B0BECE0]   413332 ms: Scavenge 1315.8 (1424.7) -> 1314.9 (1425.2) MB, 4.1 / 0.0 ms  (


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00000157BCEDC5C1]
    1: StubFrame [pc: 00000157BCEBA201]
    2: join [000003F0B58B2771] [L:\repo\maritime\swipetool_sentinels_ais\node_modules\@angular-devkit1]: />)
    3: arguments adaptor frame: 13->1
    4: _resolve [0000012...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of mem
 1: 00007FF6E375121A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4810
 2: 00007FF6E372A5B6 node::MakeCallback+4518
 3: 00007FF6E372AFA0 node_module_register+2160
 4: 00007FF6E39BB3EE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF6E39BB31F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF6E3EF9304 v8::internal::Heap::MaxHeapGrowingFactor+11476
 7: 00007FF6E3EEFA67 v8::internal::ScavengeJob::operator=+25543
 8: 00007FF6E3EEDFDC v8::internal::ScavengeJob::operator=+18748
10: 00007FF6E3EF6FD6 v8::internal::Heap::MaxHeapGrowingFactor+2470
11: 00007FF6E3A99A5B v8::internal::Factory::AllocateRawWithImmortalMap+59
12: 00007FF6E3A9C55D v8::internal::Factory::NewRawTwoByteString+77
13: 00007FF6E3CB05E8 v8::internal::Smi::SmiPrint+536
14: 00007FF6E39AE8FB v8::internal::StringHasher::UpdateIndex+219
15: 00007FF6E3CC9C38 v8::internal::SlicedString::SlicedStringGet+2968
16: 00007FF6E3D92385 v8::internal::RegisterConfiguration::AreAliases+96677
17: 00000157BCEDC5C1

benboughton1 · 2020-11-26T21:06:46Z

Angular 11 (CLI) compiles into production with ngx-leaflet and Leaflet.glify for with no problems except #88

I don't have types rolling into my IDE but am getting by.

Might be worth trying again now if you have previously had issues.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issues with Parcel and Angular #68

Issues with Parcel and Angular #68

alunacob commented May 14, 2020

Niklas345 commented Jul 20, 2020

robertleeplummerjr commented Jul 20, 2020

Niklas345 commented Jul 20, 2020 •

edited

Loading

robertleeplummerjr commented Jul 20, 2020 •

edited

Loading

Niklas345 commented Jul 20, 2020 •

edited

Loading

Niklas345 commented Jul 21, 2020 •

edited

Loading

cwgrc2 commented Sep 10, 2020 •

edited

Loading

Niklas345 commented Sep 29, 2020

robertleeplummerjr commented Sep 29, 2020

cwgrc2 commented Sep 29, 2020

Niklas345 commented Oct 1, 2020

robertleeplummerjr commented Oct 1, 2020

cwgrc2 commented Oct 1, 2020

Niklas345 commented Oct 4, 2020

cwgrc2 commented Oct 30, 2020

alunacob commented Oct 30, 2020

alunacob commented Nov 4, 2020

benboughton1 commented Nov 26, 2020

Issues with Parcel and Angular #68

Issues with Parcel and Angular #68

Comments

alunacob commented May 14, 2020

Niklas345 commented Jul 20, 2020

robertleeplummerjr commented Jul 20, 2020

Niklas345 commented Jul 20, 2020 • edited Loading

robertleeplummerjr commented Jul 20, 2020 • edited Loading

Niklas345 commented Jul 20, 2020 • edited Loading

Niklas345 commented Jul 21, 2020 • edited Loading

cwgrc2 commented Sep 10, 2020 • edited Loading

Niklas345 commented Sep 29, 2020

robertleeplummerjr commented Sep 29, 2020

cwgrc2 commented Sep 29, 2020

Niklas345 commented Oct 1, 2020

robertleeplummerjr commented Oct 1, 2020

cwgrc2 commented Oct 1, 2020

Niklas345 commented Oct 4, 2020

cwgrc2 commented Oct 30, 2020

alunacob commented Oct 30, 2020

alunacob commented Nov 4, 2020

benboughton1 commented Nov 26, 2020

Niklas345 commented Jul 20, 2020 •

edited

Loading

robertleeplummerjr commented Jul 20, 2020 •

edited

Loading

Niklas345 commented Jul 20, 2020 •

edited

Loading

Niklas345 commented Jul 21, 2020 •

edited

Loading

cwgrc2 commented Sep 10, 2020 •

edited

Loading