Как экспортировать защиту Angular 10 с помощью ДОКУМЕНТА для общедоступного API

У меня есть библиотека Angular 10 с защитой. Я хочу экспортировать защиту для использования на маршрутизаторе приложения-потребителя. Я пошел по пути экспорта гарда в свой public-api.ts, но получаю ошибку сборки, что тип Document не может быть разрешен. Я ввожу DOCUMENT в свою защиту. Код ошибки и защиты ниже. Есть ли совет по экспорту?

Ошибка сборки:

Metadata collected contains an error that will be reported at runtime: Could not resolve type Document.
  {"__symbolic":"error","message":"Could not resolve type","line":19,"character":40,"context":{"typeName":"Document"}}

Сторожить:

import { Inject, Injectable, OnDestroy } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Router, CanActivate } from '@angular/router';
import { Subscription } from 'rxjs';
import { QrRedirectService } from './qr-redirect.service';
import { MobileOS, QrUser } from '../qr-lib.model';
import { QR_LIB_CONFIG } from '../qr-lib.config.token';
import { QrLibConfig } from '../qr-lib.config';
@Injectable()
export class QrRedirectGuard implements CanActivate, OnDestroy {
  config: QrLibConfig;
  qrUser: QrUser;
  redirectUrl: string;
  redirectSubscription: Subscription;
  constructor(
    @Inject(QR_LIB_CONFIG) qrLibConfig,
    @Inject(DOCUMENT) private document: Document,
    public qrRedirectService: QrRedirectService,
    public router: Router,
  ) {
    if (qrLibConfig) {
      this.config = qrLibConfig;
    }
    (this.redirectSubscription = this.qrRedirectService
      .getQrUser()
      .subscribe((user: QrUser) => {
        this.qrUser = user;
      })),
      // tslint:disable-next-line: no-unused-expression
      (error: any) => {
        console.error(error);
      };
  }
  ngOnDestroy(): void {
    this.redirectSubscription.unsubscribe();
  }
  /**
   * The `Window` object from `Document` defaultView.
   */
  get window(): Window {
    return this.document.defaultView || window;
  }
  /**
   * Redirects instantly to the external link without the mediation of the router.
   */
  public redirect(url: string): Promise<boolean> {
    return new Promise<boolean>((resolve, reject) => {
      try {
        resolve(!!this.window.open(url));
      } catch (e) {
        reject(e);
      }
    });
  }
  /**
   * Returns `true` if user is on Android device.
   */
  isAndroid(osName: string): boolean {
    return osName === MobileOS.Android;
  }
  /**
   * Returns `true` if user is on iOS device.
   */
  isIOS(osName: string): boolean {
    return osName === MobileOS.iOS;
  }
  /**
   * Returns `false` if `QrUser` and `os` are valid, redirects to app store,
   * and directs the router to stop navigation.
   * Returns `true` if `QrUser` or `os` is invalid which directs the router
   * to continue with navigation.
   */
  canActivate(): boolean {
    if (this.qrUser && this.qrUser.os) {
      if (this.isAndroid(this.qrUser.os)) {
        this.redirectUrl = this.config.androidStoreUrl;
      }
      if (this.isIOS(this.qrUser.os)) {
        this.redirectUrl = this.config.iosStoreUrl;
      }
      if (this.redirectUrl) {
        // Jumps to the external url
        this.redirect(this.redirectUrl).then(() => false);
      }
    }
    // default route (qr landing page)
    return true;
  }
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
427
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изменение @Inject(DOCUMENT) private document: Document на @Inject(DOCUMENT) private document: any должно позволить вашей библиотеке собраться.

То же самое испытал 2 недели назад. Основываясь на этом, вы все еще можете удалить ключевое слово private из параметра внедрения (@Inject(DOCUMENT) document: any), добавить поле private document: Document; в свой класс и выполнить назначение в конструкторе (this.document = <Document>document;). Таким образом, вам не нужно делать бросок каждый раз, когда вы хотите использовать document. Пока параметр инъекции имеет тип any.

Pieterjan 10.12.2020 01:36

Другие вопросы по теме