Angular Googlemaps typing fails unit tests

Question

I'm using the @typings/googlemaps typing for an Angular application, which when serving runs and returns no warnings or errors.

However, I'd like to create some unit tests for my components, and Karma cant launch, producing errors like:

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

I followed this post and others like it to install the typing and continue my work.

Adding declare var google:any to the typings.d.ts won't work since it is already declared in the typing file, and the 'Duplicate identifier' compile error is given.

Any suggestions?

EDIT 1:

An excerpt of code on my google-maps.service.ts, one of the files giving an error. I don't import googlemaps, as it's not necessary since it's a typing by my understanding.

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: I updated the code above. It uses the same structure as the Angular 2+ Maps project, with reference to the code here. There aren't any pre-compilation errors thrown because the 'google' keyword is accounted for in the typing.

Can you share your code - for example, in the file generating this error do you have an import for googlemaps? — Fenton, Oct 12 '17 at 12:43

score 0 · Answer 1 · answered Oct 12 '17 at 15:28

0

You will need to hint to the compiler that you are using google maps... for example using an import:

import { googlemaps } from 'googlemaps';

Or using a ///<reference... comment if you aren't using modules.

answered Oct 12 '17 at 15:28

Fenton

241,084
71
387
401

Hey @Fenton - this won't resolve my issue, I don't use 'googlemaps' as a package anywhere in my code, and even if I add an import for 'google', I get an error saying the 'google' package cannot be found :( – jarodsmk Oct 18 '17 at 09:47
WIll update my post & code further to include some additional pointers. – jarodsmk Oct 18 '17 at 10:27

Angular Googlemaps typing fails unit tests

1 Answers1