Chrome specific runtime variables throw error - @types/w3c-web-usb

🐞 bug report

Is this a regression?

Seems to be an ongoing issue: https://github.com/angular/angular/issues/4902

Description

navigator.usb.requestDevice({
    filters: [{}]
});

Will work but it throws the following error:

Property ‘usb’ does not exist on type ‘Navigator’.

and if you use more of the w3c-web-usb types

Cannot find name ‘USBDevice’.

🔬 Minimal Reproduction

https://github.com/noelelias/angular-usb-issue

🔥 Exception or Error

Property ‘usb’ does not exist on type ‘Navigator’.

🌍 Your Environment

Angular CLI version 9.1.6 Angular: 9.1.11

[JoostK]

Thanks. The reason the @types/w3c-web-usb package is not automatically included is because src/tsconfig.app.json specifies "types": [], I’m guessing because it excludes testing related types from being visible in production code. Because of this configuration, TS will not automatically include any types in ./node_modules/@types/. If you add "w3c-web-usb" to that array (also in tsconfig.spec.ts ) it will start to work.

The is a bit about typings in https://angular.io/guide/typescript-configuration however the scenario where global ambient files are used is not documented there. So from that perspective the docs could be extended to mention this case.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}