CODEWITHSUNDEEP
angulargoogle-mapsundefinedmarkerclusterer
mike
mike

Reputation: 425

Angular 5 / Google Map - "ReferenceError: google is not defined"

I use Angular 5 with one type : "@types/markerclustererplus": "2.1.28". This type installs @types/google-maps.

I added script part in "index.html" file to load map. In my component, I can use google namespace. This works fine.

However, when I run tests... it fails! I got "ReferenceError: google is not defined"

I tried so many things... If you have any idea, I take it!

Thank you.

Upvotes: 4

Views: 6496

Answers (3)

Vladimir Gonchar
Vladimir Gonchar

Reputation: 11

 "test": {
          "builder": "@angular-devkit/build-angular:karma",   
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",                       
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": ["src/app/mock/GoogleMock.js"],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }

Upvotes: 0

mike
mike

Reputation: 425

Thank you Alexander!

You bring me a real clue!

After your post, I looked deeper into angular google mock. I finally found this : GoogleMock. I then adjusted it and it works.

Thanks !

Upvotes: 4

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38807

In your test you can use a mock/stub to define google on the window object as well as any other objects/functions your component is interacting with:

window['google'] = {
  maps: {
    Maps: () => {}
  }
};

You can then use using Jasmine Spies to intercept calls to a given object and/or function on the google such as maps to return custom values or anything else you'd need to test your component.

const spy = spyOn(window['google']['maps'], 'Maps').and.returnValue({});

The reason bracket notation is being used to please the TypeScript compiler. With dot notation you'd see an error such as Property 'google' does not exist on type 'Window'.

Hopefully that helps as least resolve the undefined error you are seeing.

Thanks!

Upvotes: 9

Related Questions