javascript - TS2307：在 Angular 中找不到错误模块本地 geojson

Question

I want to draw a world map using d3-geo-projection. As input file I've thus far used https://enjalot.github.io/wwsd/data/world/world-110m.geojson, but I want to switch to a locally hosted version of that exact file.

Code I'm using that works fine:

const url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
d3.json(url).then(function(geojson) {
  svg.append("path").attr("d", path(geojson))
});

Using examples and tutorials, I've added import world110m from './world110m.geojson'; with world110m.geojson in the same folder as the file, and changed const url"..."; to const url = world110m;.

This results in 2 errors in Terminal:

ERROR in ./src/app/02_robinson_projection/world110m.geojson 1:7 Module parse failed: Unexpected token (1:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders {"type":"Fea...

and

src/app/02_robinson_projection/robinson-projection.component.ts(5,23) 中的错误：错误 TS2307：找不到模块“./world110m.geojson”。

一些谷歌搜索导致不得不添加：

"compilerOptions": {
  "resolveJsonModule": true, 
  "esModuleInterop": true,
  ...
}

但是，错误仍然存​​在，并且浏览器中的页面会出现黑色覆盖，给出第一个错误。

我已经考虑在我的项目中进一步集成 webpack（https://webpack.js.org/concepts/loaders/），但是当我寻找 geojson-loader 时，我发现的只是旧的 json-loader，我'已经包括在内（即使它说不再需要）。
与此同时，我还创建了一个 webpack.config.js，

module.exports = {
  module: {
    rules: [
      { test: /\.geojson$/, use: 'json-loader' }
    ]
  }
};

但我很确定这段代码不正确。

我知道这是在比较苹果和橘子，但为什么在 Angular 中包含本地（geo）json 文件这么麻烦？当我在上面使用本地geojson在普通JS中尝试时，它工作得很好。

标签： javascriptangulartypescriptd3.js