如何解决Angular 16中使用vagran/dxf-viewer时的'THREE'命名空间找不到错误？

问题分析 #

启动项目时出现 TS2503: Cannot find namespace 'THREE' 错误，本质是 dxf-viewer 的类型声明文件依赖 THREE 命名空间，但 TypeScript 未正确加载 three 的类型定义，和修改 module 属性无关。

解决步骤 #

• 确保安装完整依赖
  必须同时安装 three 本体及其类型包，执行命令：

  npm install three @types/three --save
  

• 配置 TypeScript 加载 three 类型
  修改根目录下的 tsconfig.json，在 compilerOptions 中添加 types 数组并引入 three：

  {
    "compilerOptions": {
      // 保留原有配置
      "types": ["three"]
    }
  }
  

• 同步应用级 TypeScript 配置
  若项目中有 tsconfig.app.json，同样在其 compilerOptions 中添加 types 配置：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "types": ["three"]
    }
  }
  

• 恢复原有 module 配置
  将之前修改的 module 属性改回 Angular 16 默认值（通常为 "ESNext"），避免引发其他模块兼容问题。

• 重启项目并清理缓存
  执行命令重启开发服务器，确保配置生效：

  ng serve --clear-cache
  

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