错误 TS2304：在 NX 中构建的 Angular 应用程序上找不到名称“localStorage”

Question

我无法再在 NX 工作区中的 Angular 应用程序上运行“构建”命令。 NX 构建访问 dom 上“localStorage”的依赖库时发生错误：

Executing task: npx nx run my-app:build --configuration=production 
  
   ×  1/20 dependent project tasks failed (see below)
   √  19/20 dependent project tasks succeeded [19 read from cache]

libs\my-lib\src\example-file.ts:43:5 error TS2304: Cannot find name 'localStorage'.

当我构建单独导致问题的库时（没有 Angular 应用程序），我没有收到任何错误：

Executing task: npx nx run my-lib:build 

   √  8/8 dependent project tasks succeeded [8 read from cache]

 NX   Successfully ran target build for project my-lib and 8 tasks it depends on (1s)

“生产”和“开发”版本都会出现此问题。

该问题仅在使用“build”命令时出现，使用“serve”命令一切正常。

我尝试在应用程序的 tsconfig.json 和 tsconfig.app.json 上添加 "lib": ["es2022", "dom"] 以允许访问 DOM。这并不能解决问题。

如果我在库的 tsconfig.lib.json 上添加 "lib": ["es2022"] (without DOM) 并单独构建库，则会出现错误。

我尝试将 "ssr": false 和 "prerender": false 添加到 Angular 应用程序的 project.json 文件中，因为我发现有些人在尝试访问服务器端渲染上的 localStorage 时遇到了问题。

任何帮助将不胜感激。

角度版本：10.2.18

NX版本：20.0.7

打字稿版本：5.5.4

角度应用程序的project.json：

{
  "name": "my-app",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "app",
  "sourceRoot": "apps/my-app/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "verbose": true,
        "outputPath": "dist/apps/my-app",
        "index": "apps/my-app/src/index.html",
        "browser": "apps/my-app/src/main.ts",
        "polyfills": [], 
        "tsConfig": "apps/my-app/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "apps/my-app/src/favicon.ico",
          "apps/my-app/src/assets"
        ],
        "styles": [
          "apps/my-app/src/styles.scss",
          {
            "input": "apps/my-app/src/assets/styles/themes/dark-cyan-theme.scss",
            "bundleName": "dark-cyan-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/dark-deep-purple-theme.scss",
            "bundleName": "dark-deep-purple-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/dark-grey-theme.scss",
            "bundleName": "dark-grey-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/dark-light-green-theme.scss",
            "bundleName": "dark-light-green-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/dark-pink-theme.scss",
            "bundleName": "dark-pink-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/dark-yellow-theme.scss",
            "bundleName": "dark-yellow-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/light-amber-theme.scss",
            "bundleName": "light-amber-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/light-blue-gray-theme.scss",
            "bundleName": "light-blue-gray-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/light-blue-theme.scss",
            "bundleName": "light-blue-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/light-indigo-theme.scss",
            "bundleName": "light-indigo-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/light-pink-theme.scss",
            "bundleName": "light-pink-theme",
            "inject": false
          },
          {
            "input": "apps/my-app/src/assets/styles/themes/light-teal-theme.scss",
            "bundleName": "light-teal-theme",
            "inject": false
          }
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "2mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all",
          "ssr": false,
          "prerender": false 
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "ssr": false,
          "prerender": false 
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "buildTarget": "my-app:build:production"
        },
        "development": {
          "buildTarget": "my-app:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "buildTarget": "my-app:build"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint"
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/my-app/jest.config.ts"
      }
    }
  }
}

Answer 1

我得到了一个有效的解决方案，我更换了：

  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      ...
    },
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      ...
    },
  },

与：

  "targets": {
    "build": {
      "executor": "@nx/angular:application",
      ...
    },
    "serve": {
      "executor": "@nx/angular:dev-server",
      ...
    },
  },

在角度应用程序的project.json中