angularwebgpuangular19

"Property 'gpu' does not exist on type Navigator"

Fresh project.

  1. I create the project with ng new,
  2. then immediately upgrade to angular 19 with ng upgrade @angular/core@19 @angular/cli@19.
  3. I then install WebGPU type bindings npm install --save-dev @webgpu/types.
  4. I wipe out the app.component.html file
  5. I add to tsconfig.json the typeroots for webgpu: "typeRoots:["@webgpu/types"]
  6. In app.component.ts, I have AppComponent inherit from OnInit and implement ngOnInit solely with the action of assigning a local variable gpu with the value navigator.gpu.
  7. I run npm start to run the web server

Instead of successfully building, I get the following error from the terminal:

✘ [ERROR] TS2339: Property 'gpu' does not exist on type 'Navigator'. [plugin angular-compiler]

    src/app/app.component.ts:11:24:
      11 │     let gpu = navigator.gpu;
         ╵                         ~~~

What have I done wrong?

Files, for reference (only files that have been altered from the stock files angular creates):

tsconfig.json:

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "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":["./node_modules/@webgpu/types"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

app.component.ts

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;
  }
}

app.component.html: [is a blank file]

Solution

  • In your tsconfig.json

    "types":["@webgpu/types"]

    instead of using typeRoots.

    Per the docs,

    If typeRoots is specified, only packages under typeRoots will be included. For example:

    Which is not what you want.

    Also note that web gpu might not be enabled on your browser. For Chrome there are several conditions listed here.