Angular + webauthn = Свойство «Учетные данные» не существует для типа «Навигатор»? - PullRequest
1 голос
/ 06 апреля 2019

Я пытался добавить 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
    }
  }
}

Но очень утомительно писать весь этот TypeScript для всего API CredentialsContainer. Кроме того, кто-то уже проделал всю эту работу в DefinitelyTyped, верно?

Поэтому я добавил @types/webappsec-credential-management в свой проект с npm install --save-dev @types/webappsec-credential-management.

Теперь Visual Studio Code знает, что делать; У меня есть автозаполнение и все.

Но Angular все равно не скомпилируется. Выдает ту же ошибку выше.

Что мне нужно сделать, чтобы Angular распознал navigator.credentials?

Ответы [ 2 ]

2 голосов
/ 30 апреля 2019

Вы можете выполнить следующие действия:

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

, затем отредактировать angular's <project>/src/tsconfig.app.json

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

Необходимо отредактировать собственный angular tsconfig.app.json, так как он будет использоваться для компиляцииугловой код.Корень tsconfig.json используется для начальной загрузки и общего (vscode) конфигурирования машинописного текста.Так что, если вы просто добавите @types/webappsec-credential-management к вашим типам, он будет распознан в вашем редакторе, но он будет игнорироваться собственным компилятором angular и, таким образом, создаст такую ​​ошибку при наборе:

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

0 голосов
/ 07 апреля 2019

Мне не хватало этого в верхней части моего .ts файла:

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

Мне также нужно было ng update typescript и ng update @angular/cli.

...