How to import Mapbox GL Draw in Angular 8 project

Question

I'm working on a Angular 8 project with Webpack. I was able to integrate Mapbox GL JS, but I don't know how to import Mabox GL Draw. I have following versions:

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

I followed Mapbox GL Draw docs, so in my Angular Service, I added:

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

So I've got this error:

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. Try npm install @types/mapbox__mapbox-gl-draw if it exists or add a new declaration (.d.ts) file containing `declare module '@mapbox/mapbox-gl-draw';

Following this suggestion I try to use require instead of import:

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

I had this:

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

So I tried to follow this, I modified my tsconfig.json and I installed via npm "fs". But an error occurs:

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

So I decided to get back to the first error and I followed this. I modified tsconfig.json file adding these values:

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

Than I created index.d.ts file inside these three folders types/@mapbox/mapbox-gl-draw/ with this content

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

But I get this error

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

Now I feel so close to solution, but I don't now how to go further.

Answer 1

I created an additional index.d.ts file inside types/@mapbox folder with this content:

declare module '@mapbox';

But this time I got this back:

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

And following this and this in my webpack.common.js file I added line related to fs:

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

Then the code was compiled successfully.

Answer 2

I was able to get by with a @ts-ignore in my directive:

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

and this in the webpack config like @tommynicoletti's answer:

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