角度 + webauthn = 属性 'credentials' 在类型"导航器"上不存在？

Question

我一直在尝试将webauthn添加到Angular应用程序中。这个MDN页面概述了必要的步骤： https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API

重要的是，使用 API 需要访问 navigator.credentials .但是，当我尝试引用它时，Angular 不会编译。例如，以下代码行：

await navigator.credentials.create({...});

。产生此错误：

error TS2339: Property 'credentials' does not exist on type 'Navigator'.

现在我知道我可以做这样的事情：

declare global {
  interface Navigator {
    credentials: {
      create(): void,
      get(): void
    }
  }
}

但是必须为整个 CredentialsContainer API 编写所有 TypeScript 真的很乏味。此外，有人已经在DefinitelyTyped中完成了所有这些工作，对吧？

所以我用npm install --save-dev @types/webappsec-credential-management将@types/webappsec-credential-management添加到我的项目中。

现在Visual Studio Code知道该怎么做;我有自动完成和一切。

但是 Angular 仍然不会编译。它给出了与上面相同的错误。

我需要做什么才能让 Angular 识别navigator.credentials？

Answer 1

您可以按以下步骤操作：

npm install --save-dev @types/webappsec-credential-management

然后编辑 Angular 的<project>/src/tsconfig.app.json

{
  ...
  "compilerOptions": {
    ...
    "types": [
      "@types/webappsec-credential-management"
    ]
    ...
}

有必要编辑 angular 自己的tsconfig.app.json因为它将用于编译 angular 的代码。根tsconfig.json用于引导和常规 (vscode( 打字稿配置。因此，如果您只是将@types/webappsec-credential-management添加到您的类型中，它将在您的编辑器中被识别，但它将被 angular 自己的编译器忽略，从而创建此键入错误：

error TS2339: Property 'credentials' does not exist on type 'Navigator'. .

Answer 2

我在 .ts 文件的顶部缺少这个：

/// <reference types="@types/webappsec-credential-management" />

我还需要ng update typescript和ng update @angular/cli.