MapLibre doesn't work Angular 13.2.2 #970

peteresteris · 2022-02-09T13:17:20Z

Hello! Thanks for contributing. For the fastest response and resolution, please:

Hi pals!
I have used maplibre in angular but after last version 13.2.2 through some misterious errors. This is my versions:
imagen

I have intalled MapLibreGl by command:
npm install maplibregl @types/maplibregl @types/geojson

I followed all instructions like:

add "node_modules/maplibre-gl/dist/maplibre-gl.css" to styles in angular.json

But, in the first moment I put "import { Map } from 'maplibre-gl';" into .ts file, it throughs me a very strange pack of errors:

Compiled with problems:X

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:3:19 - error TS7016: Could not find a declaration file for module '@mapbox/point-geometry'. 'D:/PROJECTS/ANGULAR/homelasvegasnevada/node_modules/@mapbox/point-geometry/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/mapbox__point-geometry if it exists or add a new declaration (.d.ts) file containing declare module '@mapbox/point-geometry';

3 import Point from '@mapbox/point-geometry';


ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:5:52 - error TS7016: Could not find a declaration file for module '@mapbox/vector-tile'. 'D:/PROJECTS/ANGULAR/homelasvegasnevada/node_modules/@mapbox/vector-tile/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/mapbox__vector-tile if it exists or add a new declaration (.d.ts) file containing declare module '@mapbox/vector-tile';

5 import { VectorTileFeature, VectorTileLayer } from '@mapbox/vector-tile';
~~~~~~~~~~~~~~~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2232:61 - error TS2344: Type 'Us' does not satisfy the constraint '{}'.
Type 'unknown' is not assignable to type '{}'.

2232 export declare type UniformValues = $ObjMap<Us, (u: Uniform) => V>;
~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2622:13 - error TS2503: Cannot find namespace 'GeoJSON'.

2622 _geometry: GeoJSON.Geometry;
~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2627:18 - error TS2503: Cannot find namespace 'GeoJSON'.

2627 get geometry(): GeoJSON.Geometry;
~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2628:18 - error TS2503: Cannot find namespace 'GeoJSON'.

2628 set geometry(g: GeoJSON.Geometry);
~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:4588:13 - error TS2503: Cannot find namespace 'GeoJSON'.

4588 features?: GeoJSON.Feature[];
~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:4591:13 - error TS2503: Cannot find namespace 'GeoJSON'.

4591 features?: GeoJSON.Feature[];
~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:6511:41 - error TS2503: Cannot find namespace 'GeoJSON'.

6511 setGeoJSONSourceData(id: string, data: GeoJSON.GeoJSON | string): void;
~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:8635:4 - error TS2411: Property 'mousemove' of type 'undefined' is not assignable to 'string' index type '(e: any) => void'.

8635 mousemove?: undefined;
~~~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:8636:4 - error TS2411: Property 'mouseout' of type 'undefined' is not assignable to 'string' index type '(e: any) => void'.

8636 mouseout?: undefined;

I don't know what to make else. I left bulletless trying to solve this problem.

The text was updated successfully, but these errors were encountered:

HarelM · 2022-02-09T13:36:00Z

If you are using angular I suggest to use npx-maplibre-gl.
Regardless, @types/maplibre-gl is no longer needed in latest version of maplibre.
You can look at my project if you would like to see what is installed there:
https://github.com/IsraelHikingMap/Site/blob/102d443c90450abb84f9a97ba30789b25a05969e/IsraelHiking.Web/package.json

peteresteris · 2022-02-09T13:51:59Z

Thanx for responding me pal. Certainly, I am using npx-maplibre-gl and it installed all I needed. But I have the same issue.

HarelM · 2022-02-09T13:53:13Z

Please share a stackblitz or something similar.

peteresteris · 2022-02-09T14:34:46Z

I don't know how to use stackblitz. Basically, I create a new project after install Angular. I installed and configured both maplibre-gl and npx-maplibre-gl (in different times) and I had same results.

peteresteris · 2022-02-09T14:35:45Z

It happens after I import map from maplibregl

HarelM · 2022-02-09T14:47:19Z

I'm sorry, I can't help without seeing the problem...
Try to learn how stackblitz works and try to reproduce the issue there.

peteresteris · 2022-02-09T18:43:48Z

Ok pal.
I made a stackblitz and it worked. But, this don't happen on my VSC
This is the link
In my VSC when I compile; compiler fail on import map line.
It trigger this errors:

Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:3:19 - error TS7016: Could not find a declaration file for module '@mapbox/point-geometry'. 'D:/PROJECTS/ANGULAR/homelasvegasnevada/node_modules/@mapbox/point-geometry/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/mapbox__point-geometry if it exists or add a new declaration (.d.ts) file containing declare module '@mapbox/point-geometry';

3 import Point from '@mapbox/point-geometry';
~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:5:52 - error TS7016: Could not find a declaration file for module '@mapbox/vector-tile'. 'D:/PROJECTS/ANGULAR/homelasvegasnevada/node_modules/@mapbox/vector-tile/index.js' implicitly
has an 'any' type.
Try npm i --save-dev @types/mapbox__vector-tile if it exists or add a new declaration (.d.ts) file containing declare module '@mapbox/vector-tile';

5 import { VectorTileFeature, VectorTileLayer } from '@mapbox/vector-tile';
~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2232:61 - error TS2344: Type 'Us' does not satisfy the constraint '{}'.
Type 'unknown' is not assignable to type '{}'.

2232 export declare type UniformValues = $ObjMap<Us, (u: Uniform) => V>;
~~

Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:8635:4 - error TS2411: Property 'mousemove' of type 'undefined'
is not assignable to string index type '(e: any) => void'.

8635 mousemove?: undefined;
1m ~~~~~~~~~

Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:8636:4 - error TS2411: Property 'mouseout' of type 'undefined' is not assignable to string index type '(e: any) => void'.

8636 mouseout?: undefined;
~~~~~~~~

ERRORS HAPPENED INTO maplibre-gl.d.ts

peteresteris · 2022-02-09T18:48:38Z

I tried installing:
npm i --save-dev @types/mapbox__point-geometry
npm i --save-dev @types/mapbox__vector-tile
and 2 first errors changed to those:

3 import Point from '@mapbox/point-geometry';
~~~~~

node_modules/@types/mapbox__point-geometry/index.d.ts:46:1
46 export = Point;
~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Error: node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2232:61 - error TS2344: Type 'Us' does not satisfy the constraint '{}'.
Type 'unknown' is not assignable to type '{}'.

2232 export declare type UniformValues = $ObjMap<Us, (u: Uniform) => V>;
~~

HarelM · 2022-02-09T18:58:58Z

Last error seems like the issue with #934 and tracked in #790.
Closing as this is a duplicate.
I don't know what causes this or how to easily reproduce.
Any help would be appreciated.

wipfli · 2022-02-09T18:59:55Z

Maybe I can adapt https://github.com/wipfli/maplibre-typescript such that it runs @peteresteris Angular project...

rajakumar-durga · 2023-09-11T19:35:36Z

Even I had the same error building my project with 1.15.2 maplibrgl version. I remove it from package.json and used the below npm install that resolved my issue.

Ref : https://www.geoapify.com/tutorial/angular-leaflet-mapbox-maplibre-openlayers#angular-maplibre

npm i maplibre-gl@1.x
npm i --save-dev @types/geojson

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:5:52 - error TS7016: Could not find a declaration file for module '@mapbox/vector-tile'. 'D:/PROJECTS/ANGULAR/homelasvegasnevada/node_modules/@mapbox/vector-tile/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/mapbox__vector-tile if it exists or add a new declaration (.d.ts) file containing declare module '@mapbox/vector-tile';

5 import { VectorTileFeature, VectorTileLayer } from '@mapbox/vector-tile';


ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2232:61 - error TS2344: Type 'Us' does not satisfy the constraint '{}'.
Type 'unknown' is not assignable to type '{}'.

2232 export declare type UniformValues = $ObjMap<Us, (u: Uniform) => V>;
~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2622:13 - error TS2503: Cannot find namespace 'GeoJSON'.

2622 _geometry: GeoJSON.Geometry;
~~~~~~~

ERROR

node_modules/maplibre-gl/dist/maplibre-gl.d.ts:2627:18 - error TS2503: Cannot find namespace 'GeoJSON'.

2627 get geometry(): GeoJSON.Geometry;
~~~~~~~

wipfli · 2023-09-13T15:18:51Z

Just out of curiosity, why do you use v1 @rajakumar-durga ?

rajakumar-durga · 2023-09-18T22:29:35Z

Just out of curiosity, why do you use v1 @rajakumar-durga ?

We are using angular 10.2.x , if I use >v1 I am end up seeing the same error.

waiting
ERROR: node_modules/@maplibre/maplibre-gl-style-spec/dist/index.d.ts:66:3 - error TS1005: ',' expected.

66 r: number,
~
node_modules/@maplibre/maplibre-gl-style-spec/dist/index.d.ts:67:3 - error TS1005: ',' expected.

67 g: number,
~
node_modules/@maplibre/maplibre-gl-style-spec/dist/index.d.ts:68:3 - error TS1005: ',' expected.

68 b: number,
~
node_modules/@maplibre/maplibre-gl-style-spec/dist/index.d.ts:69:7 - error TS1005: ',' expected.

69 alpha: number
~
node_modules/@maplibre/maplibre-gl-style-spec/dist/index.d.ts:78:3 - error TS1005: ',' expected.

78 h: number,

neodescis · 2023-09-18T23:18:20Z

FWIW, I have the latest MapLibre (v3.3.1) working just fine with Angular 16!

HarelM · 2023-09-19T13:17:52Z

Latest versions are working as expect as mentioned by @neodescis.
If you wish to support older versions you'll need to do a PR against the relevant branch/label and fix the issue yourself. We support only the latest.

HarelM closed this as completed Feb 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MapLibre doesn't work Angular 13.2.2 #970

MapLibre doesn't work Angular 13.2.2 #970

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

peteresteris commented Feb 9, 2022

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

peteresteris commented Feb 9, 2022

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

wipfli commented Feb 9, 2022

rajakumar-durga commented Sep 11, 2023

wipfli commented Sep 13, 2023

rajakumar-durga commented Sep 18, 2023

neodescis commented Sep 18, 2023

HarelM commented Sep 19, 2023

MapLibre doesn't work Angular 13.2.2 #970

MapLibre doesn't work Angular 13.2.2 #970

Comments

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

peteresteris commented Feb 9, 2022

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

peteresteris commented Feb 9, 2022

peteresteris commented Feb 9, 2022

HarelM commented Feb 9, 2022

wipfli commented Feb 9, 2022

rajakumar-durga commented Sep 11, 2023

wipfli commented Sep 13, 2023

rajakumar-durga commented Sep 18, 2023

neodescis commented Sep 18, 2023

HarelM commented Sep 19, 2023