Angular导入assets目录geojson文件提示找不到模块及对应类型声明如何解决

问题根因 #

TypeScript 默认仅内置了.json后缀文件的导入类型支持，未配置.geojson后缀的识别规则，因此同目录下JSON文件导入正常，GeoJSON文件会抛出缺失模块或类型声明的报错。

解决方案 #

你可以选择以下任意一种方式解决：

方式1：添加类型声明支持直接导入 #

• 在项目src目录下新建（如果已存在则直接编辑）typings.d.ts文件，添加如下声明：

declare module '*.geojson' {
  const value: import('geojson').FeatureCollection;
  export default value;
}

如果你的项目没有安装@types/geojson依赖，可以先执行npm i @types/geojson --save-dev安装，或者临时将类型定义写为any。

• 配置完成后重启ng serve开发服务，原有导入代码即可正常运行。

方式2：改用HttpClient动态加载（更适配OpenLayers使用场景） #

无需额外配置类型声明，直接通过Angular的HttpClient异步拉取GeoJSON文件内容，更符合GIS数据加载的常规逻辑：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import GeoJSON from "ol/format/GeoJSON";
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';

@Component({
  // 你的组件配置
})
export class YourComponent implements OnInit {
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.loadBundeslandData();
  }

  private loadBundeslandData(): void {
    this.http.get('assets/Bundeslandsgrenzen.geojson').subscribe(geoJsonData => {
      const vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(geoJsonData, {
          featureProjection: 'EPSG:3857' // 按需替换为你地图使用的投影坐标系
        })
      });
      const vectorLayer = new VectorLayer({ source: vectorSource });
      // 把图层加入你的OpenLayers地图实例即可
    });
  }
}

注意这种方式下，你需要先在app.module.ts中导入HttpClientModule并加入imports数组。

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