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

Posted

技术标签:

【中文标题】如何在 Angular 8 项目中导入 Mapbox GL Draw【英文标题】:How to import Mapbox GL Draw in Angular 8 project 【发布时间】: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”的类型定义文件。

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

【问题讨论】:

【参考方案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: 

那么代码就编译成功了。

【讨论】:

以上是关于如何在 Angular 8 项目中导入 Mapbox GL Draw的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 项目中导入 2 个同名的 JavaScript 函数

在 Angular nx 项目中导入 JavaScript 模块

在使用 WebWorker 时,从导入其他类的文件中导入类会导致 Angular 8 编译失败

如何在离子项目中导入cordova自定义插件?

无法在 Angular 项目中导入 socket.io-client

如何使用 Angular cli 在 Angular 2 中导入电子