为何Angular应用中.d.ts文件的模块声明无法生效？

解决方案 #

• 步骤1：修正声明文件内容
  你当前的global.d.ts仅声明了模块存在，没有匹配默认导入规则，修改内容如下：

declare module 'ol-contextmenu' {
  // 暂时用any类型保证编译通过，后续可根据实际API补全类型定义
  const ContextMenu: any;
  export default ContextMenu;
}

• 步骤2：修正ts配置优先级问题
  Angular项目通常存在两层ts配置：根目录下的tsconfig.json是全局基础配置，tsconfig.app.json是应用级生效的配置，后者优先级更高。你需要修改tsconfig.app.json的对应配置：

{
  "compilerOptions": {
    // 原有配置保留，新增typeRoots配置包含你的声明文件存放目录
    "typeRoots": [
      "node_modules/@types",
      "src"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/global.d.ts"
  ]
}

• 步骤3：清理缓存重启服务
  Angular本地开发服务会缓存类型检测结果，修改配置后关闭当前服务，执行以下命令重启即可：

# 可选：删除.angular缓存目录
rm -rf .angular
# 强制重启开发服务
ng serve --force

• 临时兼容方案
  如果需要快速跳过该类型检测，可以在导入语句上方添加忽略注释：

// @ts-ignore
import ContextMenu from 'ol-contextmenu';

注意：不要直接修改node_modules/@types下的内容，该目录内容会在每次执行npm install后被覆盖，修改不会长期生效。

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