Angular17 托管项目出现此错误：ReferenceError：缓存未定义

Question

我使用 MapTiler 库制作了一个项目。并且当将项目放在托管服务上时，出现错误：

ReferenceError: caches is not defined
    at main-FAGKM46X.js:584:229302
    at Generator.next (\<anonymous\>)
    at main-FAGKM46X.js:584:228898
    at new t (polyfills-RT5I6R6G.js:2:2236)
    at xp (main-FAGKM46X.js:584:228718)
    at UT (main-FAGKM46X.js:584:229256)
    at main-FAGKM46X.js:584:230307
    at Generator.next (\<anonymous\>)
    at main-FAGKM46X.js:584:228898
    at new t (polyfills-RT5I6R6G.js:2:2236)

出现此错误时，地图样式也不会加载。

程序访问一个 API，获取国际空间站的当前位置并将其显示在地图上

组件 HTML

<div class="map-container">
    <div class="info-container" >
        <span>Latitude: {{locateISS?.iss_position?.latitude}}</span>
        <span>Longitude: {{locateISS?.iss_position?.longitude}}</span>
        <span>Velocidade: {{speed}}km/h</span>
    </div>

    <div class="map-wrap">
        <div class="map" #map></div>
    </div>
    <div class="icon" #icon></div>
</div>

组件 TS

    import {AfterViewInit, Component, ElementRef, NgZone, OnDestroy, OnInit, PLATFORM_ID, ViewChild, inject, signal } from '@angular/core';    
    import { IssService } from '../../../services/iss.service';
    import { Map, MapStyle, config, Marker, Popup} from '@maptiler/sdk';
    import '@maptiler/sdk/dist/maptiler-sdk.css';
    import { isPlatformBrowser } from '@angular/common';
    import { LocateISS } from '../models/locate.model';

    @Component({
      selector: 'app-iss-map',
      standalone: true,
      imports: [],
      templateUrl: './iss-map.component.html',
      styleUrl: './iss-map.component.scss' 
    })
    export class IssMapComponent  implements OnInit, AfterViewInit, OnDestroy{

      map?:Map
      private issService = inject(IssService)
      locateISS?:LocateISS
      issIcon:any
      speed:Number = 0
      marker:any
      isBrowser = signal(false);
      platformId = inject(PLATFORM_ID)

      @ViewChild('map')
      private mapContainer!: ElementRef<HTMLElement>;

      @ViewChild('icon')
      private elementIcon!: ElementRef<HTMLElement>;
  
      constructor(){
        this.isBrowser.set(isPlatformBrowser(this.platformId))
        if(this.isBrowser())
          inject(NgZone).runOutsideAngular(() => {
            setInterval(() => this.updateMarker(), 1000);
          })
      }
  
      ngOnInit(): void {
        config.apiKey = 'wGRvHdO3WKYFTWYfoxL5'
        this.issService.getLocate().subscribe(locate => this.locateISS = locate)  
    
      }
  
      ngAfterViewInit(): void {
        this.map = new Map({
          container: this.mapContainer.nativeElement,
          style: MapStyle.STREETS,
          center: [ Number(this.locateISS?.iss_position.longitude), Number(this.locateISS?.iss_position.latitude)],
          zoom: 2
        });
        this.issIcon = new Marker({element : this.elementIcon.nativeElement})
        .setLngLat([Number(this.locateISS?.iss_position.longitude!), Number(this.locateISS?.iss_position.latitude!)])
        .setPopup(new Popup().setHTML("<span style='color:black; padding:20px;'>ISS</span>"))
        .addTo(this.map!); 
      }
  
      ngOnDestroy(): void {
        this.map?.remove();
      }
  
      updateMarker(){
       const oldLat = this.locateISS?.iss_position.latitude
        const oldLong = this.locateISS?.iss_position.longitude
        this.issService.getLocate().subscribe(locate => this.locateISS = locate)
        let distance = 60 * 1.1515 * (180/Math.PI) * Math.acos(
          Math.sin(Number(oldLat) * (Math.PI/180)) * Math.sin(Number(this.locateISS?.iss_position.latitude) * (Math.PI/180)) + 
          Math.cos(Number(oldLat) * (Math.PI/180)) * Math.cos(Number(this.locateISS?.iss_position.latitude) * (Math.PI/180)) * 
          Math.cos(Number(oldLong) - Number(this.locateISS?.iss_position.longitude) * (Math.PI/180))
        );
        this.speed = Math.round(distance * 1.609344)
        this.issIcon.setLngLat([Number(this.locateISS?.iss_position.long`), Number(this.locateISS?.iss_position.latitude)])    
      }
    }

我以为可能是建项目的时候出了什么问题，我又建了一遍，还是不行

Answer 1

您使用的SDK是什么版本？尝试更新到最新版本2.0.3。缓存选项是在版本 2 中引入的，并且在第一个版本中存在一个错误。

您可以尝试查看其是否有效的另一个选项是禁用缓存。

maptilersdk.config.caching = false;

我已经使用最新版本的 SDK 和 Angular 18 测试了您的代码（没有获取国际空间站位置的服务 - 我已经模拟了它），它对我有用