ngx-leaflet and leaflet seem not to work with Angular 11 + Ivy

[Zankel-Engineering]

Hello,

ngx-leaflet seems not to work with Angular 11 and Ivy.

I have build a simple dummy project. The map material is not contained in the boundaries + not all tiles are filled.

The following output is produced.

I added leaflet like this:

html:

<div
  leaflet
  [leafletOptions]="options">
</div>

ts:

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent {

  options = {
    layers: [
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '...'
      })
    ],
    zoom: 4,
    center: L.latLng(37.8, -96)
  };

}

scss:

@import '../../../node_modules/leaflet/dist/leaflet.css';
:host {
  height: 400px;
  width: 400px;
  display: block;
  border: 1px solid gray;
  overflow: hidden;
}

Is this a known issue?

Here is my setup:

Angular CLI: 11.2.5 Node: 14.15.4 OS: win32 x64

Angular: 11.2.6 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1102.5 @angular-devkit/build-angular 0.1102.5 @angular-devkit/core 11.2.5 @angular-devkit/schematics 11.2.5 @angular/cli 11.2.5 @schematics/angular 11.2.5 @schematics/update 0.1102.5 rxjs 6.6.6 typescript 4.1.5

"@asymmetrik/ngx-leaflet": "8.1.0", "leaflet": "latest",

[reblace]

Looking at this now.

[Zankel-Engineering]

Thank you, would be good, if you can let me know then. We are heavily using leaflet.

[reblace]

I don't think this is specific to Angular 11/Ivy. I haven't had any issues. If it's just a rendering the map issue, are you sure your Leaflet CSS file is being correctly included in the project? Do you have it added to your styles array in angular.json?

[Zankel-Engineering]

Hi Ryan,

thanks for your answer. Let me check it tomorrow and provide a sample repo.

Sebastian

Ryan Blace @.***> schrieb am Mo. 29. März 2021 um 18:06:

I don't think this is specific to Angular 11/Ivy. I haven't had any issues. If it's just a rendering the map issue, are you sure your Leaflet CSS file is being correctly included in the project? Do you have it added to your styles array in angular.json?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Asymmetrik/ngx-leaflet/issues/292#issuecomment-809509316, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKLGZZ753ND5TAKRQUI5SK3TGCQRNANCNFSM4ZS6TDDQ .

-- ————— Sebastian Zankel CEO / Geschäftsführer E-Mail: @.*** Tel: +496051-9159486 Mobil: +49157-73355625

[reblace]

yeah, that'd help, thanks!

[robert-graphika]

Hi there. I still have this issue. Almost the same settings: Angular: 11.2.14 rxjs: 6.6.3 typescript: 4.1.5

Getting error on compile:

Error: node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/leaflet.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of MyModule, but could not be resolved to an NgModule class.

This likely means that the library (@node_modules/@asymmetrik/ngx-leaflet) which declares LeafletModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class LeafletModule {

Another developer in my team compiled the project on his machine and got no errors. Our branch and code of the project are exactly the same so I wonder what other local configurations could cause this issue. Thanks for help!

[reblace]

The most likely issue here is probably just that I never released a version compatible with ng11. I just published a version for ng13. Let me know if that helps. I have a branch for ng11 that I could go back to and look at releasing, I just prioritized getting it out for 13 first.

[TinehineneBELHOCINE]

The most likely issue here is probably just that I never released a version compatible with ng11. I just published a version for ng13. Let me know if that helps. I have a branch for ng11 that I could go back to and look at releasing, I just prioritized getting it out for 13 first.

Hello,

Can u help me please?

i have a problem when i put the css in angular.json the map disapear and when i don't put it the map is not complete.

[reblace]

Closing as this is most likely a prior incompatibility issue that is since OBE