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

我的.ts文件顶部缺少此文件：

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

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

Answer 2

您可以按照以下步骤操作：

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

然后编辑角度的<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'.。

Angular + webauthn =类型“导航器”上不存在属性“凭据”？

2 个答案: