Angular 19项目中Navigator无gpu属性的TS错误求助

你的构建报错是因为TypeScript未能识别navigator.gpu的类型定义，问题出在tsconfig.json的类型配置方式上，具体原因和修复步骤如下：

问题根源 #

你设置"typeRoots":["./node_modules/@webgpu/types"]时，覆盖了TypeScript默认的typeRoots值（默认是["./node_modules/@types"]），导致TypeScript仅从@webgpu/types目录加载类型定义。这种方式会干扰默认DOM类型的加载逻辑，且WebGPU的类型扩展需要依赖基础DOM类型才能生效，最终引发类型识别错误。

修复步骤 #

1. 修正tsconfig.json配置 #

移除原有的typeRoots配置，改用types数组显式指定要加载的WebGPU类型包，这是最标准的类型引入方式，不会破坏默认类型加载逻辑：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ],
    // 替换原typeRoots为以下配置
    "types": ["@webgpu/types"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

2. （可选）强制引入类型注释 #

如果上述配置仍不生效，可在app.component.ts顶部添加类型引用注释，强制WebGPU类型生效：

/// <reference types="@webgpu/types" />
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  title = 'webgpuhello';
  public ngOnInit() {
    let gpu = navigator.gpu;
  }
}

3. 重启开发服务器 #

执行npm start重启服务器，类型错误即可消除。

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