ReferenceError: document is not defined while using Angular 8 NgxUsefulSwiper

Question

我有一个使用库 NgxUsefulSwiper 的组件。它在我的本地环境中运行良好，但在尝试使用开发环境中的组件访问页面时出现以下错误：

ReferenceError: document is not defined
    at Swiper.destroy (/opt/app/dist/ozdstore/ssr/server.js:253982:11)
    at /opt/app/dist/ozdstore/ssr/server.js:247115:26
    at Array.forEach (<anonymous>)
    at /opt/app/dist/ozdstore/ssr/server.js:247114:20
    at Array.forEach (<anonymous>)
    at Swiper.emit (/opt/app/dist/ozdstore/ssr/server.js:247108:19)
    at Swiper.destroy (/opt/app/dist/ozdstore/ssr/server.js:250412:16)
    at SwiperComponent.ngOnDestroy (/opt/app/dist/ozdstore/ssr/server.js:234798:21)
    at callProviderLifecycles (/opt/app/dist/ozdstore/ssr/server.js:103382:18)
    at callElementProvidersLifecycles (/opt/app/dist/ozdstore/ssr/server.js:103341:13)

我不明白这是为什么，因为我在我的本地服务器上看不到任何类型的错误，而其他使用 swiper 的页面似乎没有问题。这是我的代码；

顶级品牌-area.component.html

<div class="brand-main-area">
  <div class="brand-top-area">
    <div class="container">
      <h1 class="title">Markalar</h1>
      <div class="form-area">
        <label class="search-label">
          <i class="icon icon-search-18_3"></i>
          <input type="search" name="search" placeholder="Marka Ara">
        </label>
      </div>
      <div class="banner-product-card-area brand-card">
        <div class="banner-product-card-container">
          <!-- Swiper -->
          <swiper [config]="config" class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" *ngFor="let brand of this.brands$ | async">
                <a (click)="this.redirectToSearchPage(brand.name)" title="" class="banner-brand-card">
                  <figure class="product-logo">
                    <img [src]="getLogoImage(brand.image?.url)" alt="">
                  </figure>
                </a>
              </div>
            </div>
          </swiper>
          <!-- Add Arrows -->
          <div class="swiper-button-next next-button"></div>
          <div class="swiper-button-prev prev-button"></div>
        </div>
      </div>
    </div>
  </div>
</div>

顶级品牌-area.component.ts

import {Component, OnInit} from '@angular/core';
import {SwiperOptions} from 'swiper';
import {HttpClient} from '@angular/common/http';
import {CustomOccEndpointsService} from '../../occ/custom-occ-endpoints.service';
import {Category, OccConfig, RoutingService} from '@spartacus/core';
import {map} from 'rxjs/operators';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-brands-top-area',
  templateUrl: './brands-top-area.component.html',
  styleUrls: ['./brands-top-area.component.scss']
})
export class BrandsTopAreaComponent implements OnInit {

  brands$: Observable<Category[]>;

  config: SwiperOptions = {
    slidesPerView: 5,
    spaceBetween: 0,
    direction: 'horizontal',
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  };

  constructor(private http: HttpClient,
              private endPointsService: CustomOccEndpointsService,
              protected occConfig: OccConfig,
              protected routingService: RoutingService) {

  }
  ngOnInit(): void {
    this.brands$ = this.getBrands();
  }

  getBrands() : Observable<Category[]> {
    return this.http.get(this.endPointsService.getUrl('categories/brands/brands')).pipe(map((res: any) => res.categoryList));
  }

  redirectToSearchPage(brand: string): void {
    this.routingService.go({
        cxRoute: 'search',
        params: {
          query: '',
        },
      },
      {},
      {
        queryParams: {
          query: ':relevance:brandName:' + brand
        }
      },
    );
  }

  getLogoImage(url: string): string {
    if (!url) {
      return null;
    }
    return url.startsWith('http') ? url : this.getBaseUrl() + url;
  }

  private getBaseUrl(): string {
    return (
      this.occConfig.backend.media.baseUrl || this.occConfig.backend.occ.baseUrl || ''
    );
  }
}

Answer 1

SSR 服务器上出现错误。此服务器没有某些浏览器 API，例如 document.

angular 文档对此进行了更详细的描述，请参阅 https://angular.io/guide/universal

Because a Universal app doesn't execute in the browser, some of the browser APIs and capabilities may be missing on the server.

For example, server-side applications can't reference browser-only global objects such as window, document, navigator, or location.

Spartacus 文档中还有一个页面突出显示避免在这些 API 不可用时直接使用这些 API，请参阅 https://sap.github.io/spartacus-docs/server-side-rendering-coding-guidelines/。

ReferenceError: document is not defined while using Angular 8 NgxUsefulSwiper

ReferenceError: document is not defined while using Angular 8 NgxUsefulSwiper

angular

spartacus-storefront