Angular | WebGPU | "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]

Continue reading...