Angular 9执行npm run build:ssr报错TS2503：找不到DataTables命名空间

根因分析 #

1. 版本不匹配：Angular 9 对应的兼容angular-datatables版本为9.x分支，你当前安装的angular-datatables@10.1.3是适配Angular10的版本，跨版本会导致类型声明和SSR编译逻辑不兼容。
2. 类型声明未被服务端编译加载：SSR构建时执行的服务端编译配置（tsconfig.server.json）默认没有引入@types/datatables.net的声明文件，导致无法识别DataTables命名空间。
3. 服务端环境缺少浏览器全局对象：DataTables依赖浏览器的window、document对象，服务端运行时不会挂载全局DataTables变量，导致类型检查失败。

解决步骤 #

• 第一步：降级angular-datatables到匹配Angular9的版本
  执行命令：
  npm uninstall angular-datatables && npm install angular-datatables@9.0.1
• 第二步：修改tsconfig配置，确保类型声明被全环境加载
  在你的tsconfig.json和tsconfig.server.json的compilerOptions节点中加入types配置：

  "compilerOptions": {
    // 保留原有其他配置
    "types": [
      "node",
      "datatables.net"
    ]
  }
  

  如果新增类型配置后仍未识别，在tsconfig.json的include数组中加入"src/**/*.d.ts"。
• 第三步：添加全局命名空间兜底声明
  在src目录下新建typing.d.ts文件，加入以下内容：

  declare namespace DataTables {
    interface Settings {}
    interface DataTablesStatic {}
  }
  declare var $: any;
  

• 第四步：适配SSR环境，仅在浏览器端初始化DataTables
  在用到DataTables的组件中加入环境判断逻辑：

  import { isPlatformBrowser } from '@angular/common';
  import { PLATFORM_ID, Inject } from '@angular/core';
  
  // 组件类内部逻辑
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 仅在浏览器环境下写DataTables初始化、配置逻辑
      this.dtOptions = {
        // 你的DataTables配置项
      };
    }
  }
  

• 第五步：清理缓存重新构建
  执行命令：
  rm -rf node_modules package-lock.json && npm install && npm run build:ssr

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