Guide on integrating Mapbox GL Draw into an Angular 8 project

I'm currently working on an Angular 8 project that utilizes Webpack. My integration of Mapbox GL JS was successful, however, I am facing issues with importing Mabox GL Draw. Here are the versions I am using:

"@angular/core": "8.2.14",
"mapbox-gl": "^1.9.0",
"@types/mapbox-gl": "^1.8.2",
"@mapbox/mapbox-gl-draw": "^1.1.2",

Following the instructions provided in the Mapbox GL Draw documentation, I added the following line to my Angular Service:

import * as MapboxDraw from '@mapbox/mapbox-gl-draw';

Unfortunately, this resulted in the following error message:

TS7016: Could not find a declaration file for module '@mapbox/mapbox-gl-draw'. '/home/tommy/Work/engineering/effector/effector-gui/node_modules/@mapbox/mapbox-gl-draw/index.js' implicitly has an 'any' type. Please try 

npm install @types/mapbox__mapbox-gl-draw
if available or add a new declaration (.d.ts) file containing `declare module '@mapbox/mapbox-gl-draw';

After referring to this suggestion, I attempted using require instead of import:

const MapboxDraw = require('@mapbox/mapbox-gl-draw');

This led to another issue:

3:20 error Require statement not part of import statement @typescript-eslint/no-var-requires ERROR in ./node_modules/jsonlint-lines/lib/jsonlint.js Module not found: Error: Can't resolve 'fs' in '/home/user/proj/node_modules/jsonlint-lines/lib

My attempt to address this by modifying my tsconfig.json and installing "fs" via npm also generated an error:

This dependency was not found: * fs in ./node_modules/jsonlint-lines/lib/jsonlint.js To install it, you can run: npm install --save fs No type errors found

In order to resolve the initial error, I revisited the first solution and followed the steps outlined here. I made changes to my tsconfig.json file by adding the following values:

    "typeRoots": ["node_modules/@types","./types"],
...
  "exclude": ["node_modules","./types"]

Additionally, I created an index.d.ts file within three folders in types/@mapbox/mapbox-gl-draw/ with the following content:

declare module '@mapbox/mapbox-gl-draw';

However, this led to another error:

ERROR in undefined(undefined,undefined): TS2688: Cannot find type definition file for '@mapbox'.

Although I feel like I am close to finding a solution, I am unsure about how to proceed further.

angulartypescriptmapboxmapbox-gl-jsmapbox-gl-draw

Answer №1

In an effort to resolve an issue, I decided to create a new index.d.ts file within the types/@mapbox directory. Here is the contents of the file:

declare module '@mapbox';

However, this action resulted in the following error message:

ERROR  Failed to compile with 1 errors
This dependency was not found:
* fs in ./node_modules/jsonlint-lines/lib/jsonlint.js
To install it, you can run: npm install --save fs

To address this, I referred to this and this, and added a line related to fs in my webpack.common.js file:

module.exports = (options) => ({
    node: { fs: 'empty' },
    resolve: {

After making this adjustment, the code compiled successfully.

Answer №2

For my directive, I found a workaround using @ts-ignore:

// @ts-ignore
import * as MapboxDraw from "@mapbox/mapbox-gl-draw";

I also made changes to the webpack configuration following @tommynicoletti's solution:

module.exports = (options) => ({
    node: { fs: 'empty' },
    resolve: {

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you ensure a code snippet in JavaScript runs only a single time?

I have a scenario where I need to dynamically save my .env content from the AWS secrets manager, but I only want to do this once when the server starts. What would be the best approach for this situation? My project is utilizing TypeScript: getSecrets(&qu ...

javascriptnode.jstypescriptmongodbexpress

Create a CRUD interface in Angular 5 using automated generation techniques

Is there a framework available that can assist in creating CRUD view files from a database table within an MVC project, with Angular as the front-end? I have spent hours searching on Google but still haven't found a solution. All I came across were i ...

asp.net-mvcangularcrud

Encountered Typescript errors TS1110 and TS1005

Error in TypeScript: typings/node/node.d.ts(83,23): Type expected. TypeScript issue: typings/node/node.d.ts(1830,52): Expected '=' sign. My TypeScript compilation is failing at node.d.ts, despite multiple attempts to reinstall it. ...

typescript

How can I place an Object in front of an Array in JavaScript?

Currently, I am working on an Angular project where I need to modify a JSON array in order to display it as a tree structure. To achieve this, the objects in the array must be nested within another object. Desired format / output: this.nodes = [ { id ...

javascriptarraysangular

The listener for @ok is not being activated when using jest-test-utils with b-modal in vue-bootstrap

I have implemented the vue-bootstrap b-modal feature with the @ok="save" hook Here is a snippet of mycomponent.vue: <template> <div> <b-button @click="add">open modal</b-button> <b-modal static lazy id="modal-detail" ...

javascripttypescriptvue.jsbootstrap-vue

Angular 7's innovative method for handling singleton instances: Dynamic provider

In my Angular application, I have the ability to display lists of videos or articles along with their details. There are two main components: ContentListPage and ContentDetailsPage, which serve the same purpose for both videos and articles. The only diff ...

angulartypescriptprovider

Can you identify the category of the new Set containing the elements 1, 2, and 3?

As a beginner in TypeScript, I'm currently exploring the appropriate type for JavaScript's new Set([1, 2, 3]), but my search has been unsuccessful so far. For instance: const objNums: {[key: string]: number} = {one: 1, two: 2, three: 3}; const a ...

typescript

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Adjust the design of your Angular 2/5 app based on configuration file dynamically

I'm currently exploring the concept of a flexible layout that can be customized by users. Here's how it works: By default, there is a set layout of elements on the page (such as inputs, tables, etc). The user has the ability to rearrange where ...

angularangular2-templateangular5

Error encountered while compiling an Asp.Net Core project due to exceeding the maximum allowable path length in the

Encountering a critical error during the build process with Visual Studio 2016 update 3 Asp.Net Core. The build is interrupted with the following message: Severity Code Description Project File Line Suppression State Error MSB4018 The "FindC ...

node.jstypescriptnpmasp.net-corevisual-studio-2005

How can I programmatically trigger the optionSelected event in Angular Material's autocomplete?

I'm currently facing an issue with my Angular Autocomplete component. I am trying to trigger the (optionSelected) event within the ts file after a different event by setting the input with the updated option using this.myControl.setValue(options[1].va ...

angulartypescriptautocompleteangular-material

Exploring the File Selection Dialog in Node.js with TypeScript

Is it possible to display a file dialog in a Node.js TypeScript project without involving a browser or HTML? In my setup, I run the project through CMD and would like to show a box similar to this image: https://i.stack.imgur.com/nJt3h.png Any suggestio ...

javascriptnode.jswindowstypescriptfile

Performing operations on information within a map function

While using toLocaleString within this map, I encountered an issue where only one of the payment.amount's returned formatted as currency. {props.paymentDates.map((payment, index) => ( <tr key={"payment-" + index}> <td>{i ...

reactjstypescript

Troubleshooting an Issue with MediaStreamRecorder in TypeScript: Dealing with

I've been working on an audio recorder that utilizes the user's PC microphone, and everything seems to be functioning correctly. However, I've encountered an error when attempting to record the audio: audioHandler.ts:45 Uncaught TypeError ...

javascripthtmlaudiotypescriptmedia

invoking a function from an attached HTML file using Angular

How can I invoke a function in Angular using inner HTML? I attempted the following: cellTemplateFunc(cellElement, cellInfo){ var subContainer = document.createElement('div'); subContainer.innerHTML = "<a href='javascript:v ...

htmlangulardevextreme-angular

PIXI.js fails to optimize image loading and loads the same image multiple times when a base URL is used

I'm in the process of developing a game using PIXI.js that will be accessed through URL X but loaded on another website at URL Y. To make this possible, I've implemented an environment variable called BASE_URL. This variable is set to '&apo ...

typescriptpixi.jsparceljs

AWS Alert: Mismatch in parameter type and schema type detected (Service: DynamoDb, Status Code: 400)

Upon trying to log into my development Angular system, I encountered the following error. My setup involves AWS Serverless, Amplify Cognito, and Graphql. An error occurred: One or more parameter values were invalid. Condition parameter type does not ma ...

angularamazon-web-servicesamazon-cognitoaws-amplify

Angular2: Leveraging click events to manage CSS classes on elements

I am currently developing a web app using Angular 2. I'm facing an issue where the active element should receive an extra CSS class when clicked, but adding the ":active" CSS attribute with a custom class doesn't work as expected. The ":focus" pr ...

javascripthtmlcssangular

Unable to transfer variable from a function to the test in Protractor

Currently, I am working on a test to verify the amount of gold in my possession. The test is being conducted using TypeScript and Protractor. Within this testing scenario, I have a method named GetAmountOfChips: public static GetAmountOfChips(): PromiseL ...

typescriptpromiseprotractor

Invalid for the purpose of storage

Encountering the following error message: The dollar ($) prefixed field '$size' in 'analytics.visits.amounts..$size' is not valid for storage. return Manager.updateMany({}, { $push: { & ...

javascriptnode.jstypescriptmongodb