Angular17 hosting project presents this error: ReferenceError: caches is not defined

Question

I made a project using the MapTiler library. And when putting the project on the hosting service, the error appears:

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)

With this error, the map style does not load either.

The program accesses an API that takes the current location of the ISS and shows it on the map

Component 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>

Component 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)]) 
 }
 }

I thought it might be something when building the project, I built it again and it didn't work

Answer 1

What version of the SDK are you using? Try updating to the latest version 2.0.3. The cache option was introduced in version 2 and in one of the first versions there was a bug.

The other option you can try to see if it works is to disable the cache.

maptilersdk.config.caching = false;

I have tested your code with the latest version of the SDK and angular 18 (without the service of obtaining the position of the ISS - I have simulated it) and it has worked for me

Answer 2

I found the error coming from Adobe extensions to Chrome. Removed the adobe extension and the error stopped!

• Michael Melanson: 👋 Thanks for your comment! Would you mind giving more information about how you figured out this was coming from the Adobe extension?
• Michael Melanson: Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.