L is not defined when using georaster-layer-for-leaflet

[Nightsphere]

Hello! Thanks for making this, it has come in handy for me lately! I have a question for you to see if you can clarify a rather bizarre issue I've been having recently with this package.

I'm working in Angular 9, which I'm not sure is important or not, but I'm running out of ideas of what is at this point. Long story short, when I'm running ng serve with a local server, everything is running smoothly. I can view my raster on the Leaflet map just fine. When running ng build - which creates a production build of the app and puts it in its own dist/ folder - I can run a simple server and everything is good to go as well.

The problem is when I try to push the project up to AWS. The project doesn't even finish loading, and I get the above mentioned Uncaught ReferenceError: L is not defined. You can use this link to check out the page (which is all gray) and upon console inspection it gives the error line in the georaster-layer-for-leaflet.bundle.js. The line in question is:

var GeoRasterLayer = L.GridLayer.extend({

Do you have any idea why L wouldn't be defined here, but is defined when run in other environments? The app doesn't create the raster layer on creation, so I'm confused to be getting an error at this point. You as the user would need to click on a menu button to do that. You can see how it should work here.

Sorry for the longer post; I've just run into a wall head first and thought I'd ask your thoughts on this! Let me know if anything above wasn't clear. Thanks!

[DanielJDufour]

It seems that the issue might be that the script that defines Leaflet is loaded after the script that implements GeoRasterLayer.

Although the script tag that loads the scripts...js is defined before main-es2015...

I think the issue is the defer set on <script src="scripts.08014e7b0f176be34c89.js" defer=""></script>.

Not sure how you fix that with your Angular building. Alternative would be to load Leaflet through a script tag directly.

Let me know if this helps.

[Nightsphere]

Thanks for getting back so quickly! After your help and looking through an issue on Angular's Github, I think we found a fix. So by default Angular uses

type="module"

for each es2015 file, instead of

type="text/javascript"

and we had changed that because of earlier issues. By just adding defer at the end of the main-es2015 script tag, we essentially told the compiler to do everything in the order it is received, same with the scripts file. So when it got to your line of code, the L object had already been created and the app worked both locally and pushing up to AWS. I haven't done extensive work on front-end development yet so I'm still learning quite a bit about how webpack works and how all these scripts in the index are bundled, but this was helpful.

Thanks for taking the time to look over the issue and get back to me!

[DanielJDufour]

Thank you for the explanation. Glad you got it working.

[Anubhavx17]

can you share how to view a raster on a leaflet map in angular? Thank you!