Errores después de añadir @agm/core declaración de importación (Angular 7)

Estoy construyendo un sitio web usando Angular 7 y Google Maps (agm) y quiero añadir un mapa al mapa location componente. Sin embargo, cuando agrego import { MapsAPILoader } from '@agm/core'; a mi location.component.ts archivo, tengo múltiples errores de compilación que parecen venir de agm en sí mismo:

ERROR in node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts(50,41): error TS2314: Generic type 'MapHandlerMap' requires 1 type argument(s).
node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts(50,94): error TS2314: Generic type 'MapHandlerMap' requires 1 type argument(s).
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts(25,93): error TS2694: Namespace 'google.maps' has no exported member 'MarkerMouseEventNames'.
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts(25,129): error TS2694: Namespace 'google.maps' has no exported member 'MarkerChangeOptionEventNames'.

El código compila con éxito sin la mencionada declaración de importación, pero luego, por supuesto, el sitio web no funciona y no puedo trabajar con agm :)

¿Alguien sabe cómo resolver esto?

¡Gracias por adelantado!

# location.component.ts código:

/// 
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
import {} from 'googlemaps';
import { MapsAPILoader } from '@agm/core'; // <- This causes the problem

@Component({
  selector: 'location',
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {
  
 @ViewChild('map') mapElement: any;
 map: google.maps.Map;

  constructor(private route: ActivatedRoute, private mapsAPILoader: MapsAPILoader) { }
  

  ngOnInit() {
      this.route.queryParams.subscribe(params => {
         console.log("carNumber in queryParams= " + params["carNumber"]); 
      });
      
      this.mapsAPILoader.load().then(() => {
        const mapProperties = {
          center: new google.maps.LatLng(35.2271, -80.8431),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          };
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapProperties);
      });
  }
}

Mi location.component.html:

Pregunta hecha hace 3 años, 4 meses, 27 días - Por bughunterx

2 Respuestas:

• El problema que estás experimentando se debe a la versión de TypeScript que estás utilizando y a cómo se están manejando los tipos genéricos en la librería '@agm/core'. Para resolver este error, puedes intentar lo siguiente:

  • Actualizar la versión de TypeScript en tu proyecto. Puedes hacerlo ejecutando el siguiente comando en la terminal:

  
  npm install typescript@latest --save-dev
  

  Esto actualizará la versión de TypeScript en tu proyecto a la última versión disponible.

  • Si el paso anterior no resuelve el problema, también puedes intentar agregar una declaración de tipo genérico al import de 'MapsAPILoader'. Esto podría ayudar a TypeScript a entender mejor cómo se están manejando los tipos genéricos en esa librería. Por ejemplo:

  
  import { MapsAPILoader, MapHandlerMap } from '@agm/core';
  

  • Asegúrate de tener todas las dependencias de la librería '@agm/core' correctamente instaladas en tu proyecto. Puedes hacerlo ejecutando el siguiente comando en la terminal:

  
  npm install @agm/core --save
  

  Espero que estas sugerencias te ayuden a resolver el problema que estás experimentando con la integración de la librería '@agm/core'. ¡Buena suerte!

  Respondida el Dec 19, 2020 a las 16:10 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Para resolver el problema con la declaración de importación import { MapsAPILoader } from '@agm/core';, sigue estos pasos:

  1. Instala la versión correcta de @agm/core:

  Asegúrate de tener instalada la versión 1.1.0 o superior de @agm/core. Puedes verificarlo ejecutando el siguiente comando:

  
  npm list @agm/core
  

  Si tienes una versión anterior, actualízala usando:

  
  npm install @agm/[email protected]
  

  2. Verifica las dependencias de @agm/core:

  Asegúrate de que tengas las siguientes dependencias instaladas:

  @types/googlemaps rxjs zone.js

  3. Vuelve a importar MapsAPILoader:

  Una vez que hayas verificado e instalado las dependencias necesarias, vuelve a importar MapsAPILoader en tu archivo location.component.ts:

  typescript
  import { MapsAPILoader } from '@agm/core';
  

  4. Vuelve a agregar la referencia de tipo googlemaps:

  También necesitarás volver a agregar la referencia de tipo googlemaps en la parte superior de tu archivo location.component.ts:

  typescript
  /// 
  

  5. Reconstruye tu proyecto:

  Una vez que hayas realizado los cambios, reconstruye tu proyecto para que los errores desaparezcan.

  Solución alternativa:

  Si aún tienes problemas después de seguir los pasos anteriores, puedes intentar utilizar una solución alternativa temporal:

  • Ve al archivo `node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts`.

  • Busca la línea `export declare type MapHandlerMap = google.maps.MapHandlerMap;`.

  • Cambia `google.maps.MapHandlerMap` por `any`.

  Nota:* Esta solución alternativa no se recomienda para uso en producción, ya que puede provocar problemas inesperados. Lo mejor es resolver el problema de importación según los pasos descritos anteriormente.

  Respondida el Dec 19, 2020 a las 16:19 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---