TypeScript搭配webpack环境下如何正确加载.geojson文件？

以下方案均适配你当前的Angular + Webpack构建环境，按实现成本从低到高排序：

方案1：重命名文件后缀（零配置首选） #

第一个require报错的核心原因是Webpack默认未注册.geojson后缀的解析规则，而GeoJSON本身是完全符合规范的普通JSON格式，无需额外loader：

• 将../../assets/mygeojson.geojson重命名为../../assets/mygeojson.json
• 直接通过ESModule语法导入即可得到可直接调用的JSON对象：

import * as geojson from '../../assets/mygeojson.json';

如果导入时触发TS类型报错，打开项目根目录的tsconfig.json，将compilerOptions下的resolveJsonModule、esModuleInterop两个字段设置为true即可。

方案2：保留.geojson后缀，添加Webpack文件解析规则 #

如果业务要求必须保留.geojson后缀，通过自定义Webpack配置添加对应解析规则即可：

1. 安装自定义构建依赖：

npm install @angular-builders/custom-webpack -D

2. 项目根目录新建custom-webpack.config.js，写入以下配置：

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

3. 修改angular.json构建配置：

• 找到projects -> [你的项目名] -> architect -> build节点，将默认的builder值替换为@angular-builders/custom-webpack:browser，在options节点下新增配置"customWebpackConfig": {"path": "./custom-webpack.config.js"}
• 找到同目录下的serve节点，将builder值替换为@angular-builders/custom-webpack:dev-server
  配置完成后即可直接通过import语法导入.geojson文件。

方案3：修正fetch调用逻辑，无需开启顶层await #

第二个报错是因为你将await写在了模块顶层，不需要开启experiments.topLevelAwait实验特性，只要把fetch逻辑放到异步函数/组件生命周期内执行即可，以Angular组件为例：

async ngOnInit() {
  // 注意路径不要写../../前缀，Angular构建时会将assets目录映射到站点根路径
  const response = await fetch('assets/mygeojson.geojson');
  const geojson = await response.json();
  // 后续逻辑直接操作geojson对象即可
}

使用该方案要先确认angular.json中assets配置包含src/assets目录（Angular项目默认已配置），否则会出现404错误。

不建议随意开启Webpack的顶层await实验特性，该特性在低版本浏览器存在兼容问题，且Angular对Webpack实验特性的适配不稳定，后续版本升级容易出现构建异常。

内容的提问来源于stack exchange，提问作者polemon