Le typage angulaire de Googlemaps échoue tests unitaires

Question

J'utilise le @typings/googlemaps pour une application angulaire qui, lorsqu'elle sert, s'exécute et ne renvoie aucun avertissement ou erreur.

Cependant, je voudrais créer quelques tests unitaires pour mes composants, et Karma ne peux pas le lancement, produisant des erreurs comme:

ERROR in: ... Cannot find namespace 'google'. 

je suivais this post et d'autres comme pour installer la frappe et continuer mon travail .

Ajout declare var google:any aux typings.d.ts ne fonctionnera pas car il est déjà déclaré dans le fichier de frappe, et le « identifiant en double » erreur de compilation est donnée.

Des suggestions?

EDIT 1:

Un extrait de code sur mes google-maps.service.ts, l'un des fichiers donnant une erreur. Je n'importes pas de googlemaps, car ce n'est pas nécessaire puisque c'est une dactylographie à ma connaissance.

import {Injectable} from "@angular/core"; 
import {environment} from "../../../environments/environment"; 
import {Http} from "@angular/http"; 
import {forEach} from "@angular/router/src/utils/collection"; 

@Injectable() 
export class GoogleMapsService { 
    scriptLoadingPromise: Promise<void>; 

    api_key = ''; 
    url = ''; 

    map: google.maps.Map; 
    markers: Array<google.maps.Marker>; 
    bounds: google.maps.LatLngBounds; 
    geocoder: google.maps.Geocoder; 

    constructor(private http: Http) { 
     this.api_key = '1234'; 
     this.url = 'https://maps.googleapis.com/maps/api/js'; 
     this.markers = new Array(); 
     // Loading script 
     this.load().then(() => { 
      this.geocoder = new google.maps.Geocoder(); 
     }); 
    } 
} 

getScriptSrc(callbackName: string): string { 
    return `https://maps.googleapis.com/maps/api/js?key=${this.api_key}&callback=${callbackName}`; 
}; 

onReady(): Promise<void> { 
    return this.scriptLoadingPromise; 
}; 

load(): Promise<void> { 
    if (this.scriptLoadingPromise) { 
     return this.scriptLoadingPromise; 
    } 

    const script = window.document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.async = true; 
    script.defer = true; 
    const callbackName = 'googleMapsServiceCallback'; 
    script.src = this.getScriptSrc(callbackName); 

    this.scriptLoadingPromise = new Promise<void>((resolve: Function, reject: Function) => { 
     (<any>window)[callbackName] =() => { 
      resolve(); 
     }; 

     script.onerror = (error: Event) => { 
      reject(error); 
     }; 
    }); 
    window.document.body.appendChild(script); 

    return this.scriptLoadingPromise; 
} 

EDIT 2: J'ai mis à jour le code ci-dessus. Il utilise la même structure que le projet Angular 2+ Maps, en référence au code here. Aucune erreur de pré-compilation n'est générée car le mot clé "google" est pris en compte lors de la saisie.

Answer 1

Vous aurez besoin de faire allusion au compilateur que vous utilisez google maps ... par exemple en utilisant une importation:

import { googlemaps } from 'googlemaps'; 

ou en utilisant un ///<reference... commentaire si vous n'utilisez pas des modules.