如何在 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 编译失败