如何在Angular 8项目中导入Mapbox GL Draw

Question

我正在使用Webpack进行Angular 8项目。我可以集成Mapbox GL JS，但是我不知道如何导入Mabox GL Draw。我有以下版本：

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

我遵循了Mapbox GL Draw docs，因此在Angular Service中，我添加了：

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

所以我遇到了这个错误：

TS7016：找不到模块'@ mapbox / mapbox-gl-draw'的声明文件。 “ /home/tommy/Work/engineering/effector/effector-gui/node_modules/@mapbox/mapbox-gl-draw/index.js”隐式具有“ any”类型。如果存在，请尝试npm install @types/mapbox__mapbox-gl-draw或添加一个包含声明模块'@ mapbox / mapbox-gl-draw'的新声明（.d.ts）文件；

跟随this suggestion，我尝试使用require代替import：

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

我有这个：

3:20错误Require语句不是import语句的一部分@ typescript-eslint / no-var-requires./node_modules/jsonlint-lines/lib/jsonlint.js中的错误找不到模块：错误：无法在'/ home / user / proj / node_modules / jsonlint-lines / lib]中解析'fs'

因此，我尝试遵循this，修改了tsconfig.json

，并通过npm“ fs”安装了它。但是发生错误：

找不到此依赖项：* ./node_modules/jsonlint-lines/lib/jsonlint.js中的fs要安装它，您可以运行：npm install --save fs找不到类型错误

所以我决定回到第一个错误，然后我按了this。我修改了tsconfig.json

文件，添加了这些值：

    "typeRoots": ["node_modules/@types","./types"],
...
  "exclude": ["node_modules","./types"]
比我在这三种文件夹类型/具有此内容的@ mapbox / mapbox-gl-draw /中创建的[[index.d.ts

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

但是我收到此错误

未定义错误（未定义，未定义）：TS2688：找不到“ @mapbox”的类型定义文件。

现在，我感到非常接近解决方案，但是现在不知道该怎么走了。

我正在使用Webpack进行Angular 8项目。我能够集成Mapbox GL JS，但是我不知道如何导入Mabox GL Draw。我有以下版本：“ @ angular / core”：“ 8.2.14”，“ mapbox-gl”：...

Answer 1

我在

types / @ mapbox