4

我一直在尝试将 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
    }
  }
}

但是为整个CredentialsContainerAPI 编写所有的 TypeScript 真的很乏味。此外,有人已经完成了所有这些工作DefinitelyTyped,对吧?

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

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

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

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

4

2 回答 2

10

您可以按照以下步骤进行:

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'..

于 2019-04-30T11:54:42.260 回答
2

我在 .ts 文件的顶部遗漏了这个:

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

我还需要ng update typescriptng update @angular/cli

于 2019-04-06T22:50:27.550 回答