NX工作区构建Angular应用时出现TS2304: Cannot find name 'localStorage'错误

我完全理解你遇到的困扰：在NX工作区里单独构建依赖库一切正常，但构建Angular应用时，这个库因为访问localStorage抛出TS2304错误，而且只有build命令会出问题，serve却能正常运行。你已经尝试了添加DOM库、关闭SSR/Prerender等方法但没解决，下面我来帮你分析问题根源并给出针对性的解决方案。

问题根源分析 #

从你的描述里能抓到几个关键矛盾点：

• 单独构建库时TypeScript能识别localStorage，说明库的默认构建配置是包含DOM类型库的
• 构建应用时，库的编译上下文被改变了，导致DOM类型没有被正确引入
• serve命令正常是因为开发环境的TypeScript配置更宽松，或者运行时直接在浏览器环境中，不需要严格的静态类型检查

解决方案 #

方案1：确保库的构建严格使用自身的tsconfig.lib.json

NX在构建应用时，可能会复用部分应用的配置来编译依赖库，导致库的tsconfig.lib.json没有被正确加载。你需要确认库的构建配置明确指向自身的TypeScript配置文件：

1. 打开库的project.json文件（路径：libs/my-lib/project.json）
2. 找到build目标的配置，确保tsConfig字段正确指向tsconfig.lib.json：

"targets": {
  "build": {
    "executor": "@nx/angular:package",
    "options": {
      "tsConfig": "libs/my-lib/tsconfig.lib.json",
      "project": "libs/my-lib/ng-package.json"
      // 其他现有配置保持不变
    }
  }
}

3. 再次确认你的tsconfig.lib.json中已经包含dom库：

"compilerOptions": {
  "lib": ["es2022", "dom"],
  // 其他配置...
}

方案2：清理NX缓存，排除缓存干扰

你提到很多任务是从缓存读取的，可能之前的错误配置被缓存，导致新的配置没有生效。执行以下命令清理NX缓存：

npx nx reset

清理完成后，重新运行应用的构建命令：

npx nx run my-app:build --configuration=production

方案3：为应用的构建配置强制添加DOM库声明

如果方案1和2都无效，你可以在应用的project.json的build目标中，直接指定TypeScript的库配置，确保编译依赖库时DOM类型被加载：
在应用的project.json中，修改build目标的options，添加compilerOptions字段：

"build": {
  "executor": "@angular-devkit/build-angular:application",
  "options": {
    "verbose": true,
    "outputPath": "dist/apps/my-app",
    // ...其他现有配置
    "compilerOptions": {
      "lib": ["es2022", "dom"]
    }
  }
}

方案4：临时兜底——手动添加类型声明

如果以上方案都无法解决，你可以在库的代码中手动声明localStorage的类型，作为临时修复（优先推荐通过tsconfig解决，这是最后备选）：
在库的example-file.ts顶部添加：

// 仅作为临时方案，优先通过tsconfig配置解决
declare let localStorage: Storage;

验证流程 #

1. 先单独构建库，确认没有错误：npx nx run my-lib:build
2. 清理NX缓存：npx nx reset
3. 构建应用：npx nx run my-app:build --configuration=production

按照这个流程操作，应该能解决你遇到的TS2304错误。

备注：内容来源于stack exchange，提问作者Verrick