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

【问题标题】：How to import Mapbox GL Draw in Angular 8 project如何在 Angular 8 项目中导入 Mapbox GL Draw
【发布时间】：2020-07-11 22:20:57
【问题描述】：

我正在使用 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 服务中，我添加了：

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（如果存在）或添加一个包含 `declare module '@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"]

比我在这三个文件夹 types/@mapbox/mapbox-gl-draw/ 中创建 index.d.ts 文件的内容

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

但我得到了这个错误

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

现在我感觉离解决方案很近了，但我现在不知道如何走得更远。

【问题讨论】：

标签： angular typescript mapbox mapbox-gl-js mapbox-gl-draw

【解决方案1】：

我能够在我的指令中使用@ts-ignore：

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

这在 webpack 配置中就像 @tommynicoletti 的回答：

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

【讨论】：

【解决方案2】：

我在 types/@mapbox 文件夹中创建了一个额外的 index.d.ts 文件，其中包含以下内容：

declare module '@mapbox';

但这次我得到了这个：

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

并在我的 webpack.common.js 文件中关注 this 和 this，我添加了与 fs 相关的行：

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

那么代码就编译成功了。

【讨论】：