Angular项目重写layer的fetch调用load函数遇TS编译错误

一、修复TypeScript编译错误 #

出现Module "fs" has no default export是因为@loaders.gl部分模块依赖Node.js的fs模块，但Angular运行在浏览器环境，同时TypeScript对模块导入的校验严格。可以通过调整tsconfig.json解决：

• 打开项目根目录的tsconfig.json，在compilerOptions中添加以下配置：

  {
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "skipLibCheck": true,
      "types": []
    }
  }
  

  • allowSyntheticDefaultImports: 允许对无默认导出的模块使用默认导入语法，适配fs模块的导入方式
  • skipLibCheck: 跳过第三方库的类型定义校验，避免@loaders.gl内部的类型问题触发报错
  • types: 清空自动引入的类型，排除Node.js相关类型对浏览器环境的干扰

二、正确复现deck.gl默认fetch的行为 #

你可以通过两种方式实现和默认fetch一致的逻辑：

方式1：直接复用deck.gl的默认fetch函数 #

如果只想在默认行为前后插入自定义逻辑，直接导入并调用deck.gl提供的默认fetch即可：

import { defaultFetch } from '@deck.gl/core';

// 重写图层的fetch属性
fetch: async (url: string, context) => {
  // 这里插入你的自定义逻辑，比如加载前的参数处理、日志输出等
  console.log('准备加载资源:', url);
  
  // 调用默认fetch逻辑，和未重写时的行为完全一致
  return await defaultFetch(url, context);
}

方式2：手动调用load函数复现默认逻辑 #

如果需要更细粒度的控制，手动调用load函数时要确保传递完整参数，尤其是deck.gl的默认fetch工具：

import { load } from '@loaders.gl/core';
import type { LoaderContext } from '@loaders.gl/loader-utils';

// 重写fetch方法
fetch: async (url: string, context: LoaderContext) => {
  // 自定义逻辑，比如修改请求URL、添加请求头等
  const modifiedUrl = url + '?timestamp=' + Date.now();
  
  // 调用load函数，传递deck.gl的默认fetch工具，保证和原行为一致
  return await load(modifiedUrl, context.layer.loaders, {
    ...context.loaderOptions,
    fetch: context.fetch
  });
}

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