ngx-leaflet | Core Leaflet package for Angular.io | Frontend Framework library

I'm trying to add a MatBottomSheet to an app that I'm building in Angular 13. I'm trying to follow the example here:

https://material.angular.io/components/bottom-sheet/examples

However, I constantly fail and get this error in the browser:

core.mjs:6495 ERROR NullInjectorError: R3InjectorError(AppModule)[MatBottomSheet -> MatBottomSheet -> MatBottomSheet]: NullInjectorError: No provider for MatBottomSheet! at NullInjector.get (core.mjs:11139) at R3Injector.get (core.mjs:11306) at R3Injector.get (core.mjs:11306) at R3Injector.get (core.mjs:11306) at NgModuleRef.get (core.mjs:22189) at Object.get (core.mjs:21862) at lookupTokenUsingModuleInjector (core.mjs:3349) at getOrCreateInjectable (core.mjs:3461) at Module.ɵɵdirectiveInject (core.mjs:14720) at NodeInjectorFactory.FooterResultComponent_Factory [as factory] (footer-result.component.ts:10)

This is my app.module.ts where I think I have declared the required dependencies:

I have an application using ngx-leaflet, Leaflet for Angular, and I'm trying to do a L.titleLayer.wms but adding an extra option to tileLayer.wms. It looks likes this:

I have been stuck on this for a day now.

On a clean repo, after doing an pnpm install, then an ng serve, you end up with this error in the console

...does not have 'ɵmod' property

This can happen with any module and the workaround below work for any module. NOTE: This can also happen if you have imported something other than a Module - there is nothing wrong with my imports in this case.

Workarounds:

1. restart ng serve or run ng build twice
2. See ngx-leaflet-draw: Importing module which does not have a ɵmod property (but I couldn't get ngcc to actually do anything - so that doesn't work for me - worth pointing that my repo has multiple projects)

While those workarounds may be adequate for a development environment, in a CI environment, you have to essentially have ng build twice to workaround the issue (which comes at a cost).

My solution in my CI build at the moment is to build twice (Scary to tell a compiler, if you don't get it right the first time, have another go...)

How do you go about finding the root cause of this issue? (So I can have a single ng build step in my CI build).

Following the guide we upgraded angular 11 to 12. Before the upgrade karma is running the unit tests without any issues. However, after the upgrade this is what we end up with. Any idea how to check whats wrong.

I also compared the source with a refresh angular 12 project (karma works here), but changes did not make any difference.

I'm trying to build and deploy angular application using gitlab-ci here is my config

I have angular 10 app using ngx-leaflet and routing. I have a map component, which dynamically displays custom markers on map, based on user selection. I navigate from map component view to another component. Then I navigate back to map component. User can change date, and based on that, old layer of markers is removed and new layer of markers is loaded and shown. Everything works fine, but I always get this error:

This is about the compatibility issue between Webpack and Leaflet. As you may already know (github Issue, SO-Question1, SO-Question2 npm plugin against the issue, ngx-leaflet readme) leaflet manipulates its URLs to images in a way that is incompatible with webpack. If left unfixed they produce nonsense urls such as http://localhost:8000/static/frontend/marker-icon.2b3e1faf89f94a483539.png%22)marker-icon.png as opposed to http://localhost:8000/static/frontend/marker-icon.2b3e1faf89f94a483539.png. I can fix this with some solutions on my dev-environment, but not in my prod builds.

I have a single component that does nothing else but build a leaflet map. I have tried the given answers, I have tried the plugin, I remain without markers in my builds.

What should I be doing? What is my mistake?

My Setup

Generally I seek to deploy angular on a django backend server. All urls under "/api" belong to the Backend API, all urls under "/frontend" belong to my Angular frontend.

Leaflet is imported in my angular.json, but only its js file.

I am trying to use geoman-io plugin (https://github.com/geoman-io/leaflet-geoman) in ngx-leaflet application. I've found this post: Integrate EasyButton, Geoman with ngx-leaflet , but the only solution provided in this post, that works for me, is to use bracket notation like that:

map["pm"]["addControls"]({position: 'topleft'});

I guess that's not the best way to do this. So my question is how to properly use geoman-io in ngx-leaflet?

When i tried exactly these steps, it doesn't work, because at map.pm.addControls({...}) i get error

Property 'pm' does not exist on type 'Map'

Steps:

1. npm i @geoman-io/leaflet-geoman-free
2. Import geoman in the component import '@geoman-io/leaflet-geoman-free';
3. In angular.json in "build" section import geoman styles:

I´m trying to make everything as possible in my leaflet project in Angular with ngx-angular but can´t find the way to make them work properly.

This is my params code: