Angular 6 application cannot find namespace 'google'

Question

This question has appeared similarly in many places where the solution is to simply add

import { } from '@types/googlemaps';

which worked as a solution in past versions of angular. The issue appeared now that I am using Angular 6+

TS2304: Cannot find name 'google'.
TS2503: Cannot find namespace 'google'.

There are numerous errors like this anywhere I use google maps types. For example:

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

I can quickfix the issue by inserting // @ts-ignore above all lines that use google maps, but I am much more interested in a true fix. But the fact this works makes me feel it's a tsconfig issue which I am not super confident about.

I can confirm that googlemaps is installed inside node_modules/@types, but I am not sure about the tsconfig

ts.config

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types",
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

I created a Stackblitz Example which throws a Reference Error if you view the console. I don't know what to try next.

Frenchpolish

Answer 1

So I came across the problem earlier on GitHub and this worked for me:

• npm install --save-dev @types/googlemaps

• Adding to all my tsconfig*.json: types: [ "googlemaps"]

• Adding at the top of my file: declare const google: any;

• Adding at the end of the body of my index.html:

  <script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=****"> </script>

Try it out and tell me whether it works.

Millner

I was only ever looking at my tsconfig.json, by adding "googlemaps" to my tsconfig.app.json and suddenly it's happy. Can't believe I couldn't find this anywhere! Cheers – Frenchpolish

Answer 2

The tsconfig.json file that really needs to be updated is in src/tsconfig.app.json.

That files overrides the types property of compilerOptions of the tsconfig.json file in the root directory with an empty array so you must add the types definition for googlemaps there.

For example:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["googlemaps"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

Castigate

In general in order angular compiler (not typescript compiler) can find your types you need to specify types in src/tsconfig.app.json as stated above. In addition you need to specify type sub folder name in node_modules/@types folder. E.g. for chart.js it will be 'chart.js'. Just explore the folder node_modules/@types – Houseraising

Answer 3

Adding it to the types array of my tsconfig compiler options has never worked. But if you have the @types/googlemaps installed, you can reference this at the top of your .ts file using:

/// <reference types="@types/googlemaps" />

cf. Triple Slash Directives

Bogart

This was the only answer, that worked for me (using Angular 8 with cli) – Neutron

Answer 4

I fixed it by installing @types/google-maps not @types/googlemaps

just run this

npm install @types/google-maps --save

and import google in your component using

import { google } from "google-maps";

Guss

Answer 5

I've found something, if you are using AGM you can fix it importing:

import {} from '@agm/core/services/google-maps-types';

Alysa

Answer 6

Recently I came across this issue and it occurs due to many reasons I mention all the possible solution here:

Solution 1:

i) If you haven't enabled your google Places API to go through this link link to enable it.

ii) install @types/googlemaps in your project using npm i @types/googlemaps --save-dev for more details click here

iii) Add "types": ["googlemaps"] this to your tsconfig.json most of the case file name is tsconfig.app.json if you are curious about types check out this answer on StackOverflow.

iv) restart your server

In most cases, there is no need for declaring any google variable and the above solution works in my case also.

Solution 2:

if solution 1 does not work include this <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> in your index.html and put your api key in this link.

in one of my project solution 2 works.

Solution 3:

and if solution 1 and solution 2 do not work write this code in your ts file declare const google: any;

I hope this will be helpful.

Thanks

Electrograph

Answer 7

For anyone using AGM running into this error:

Cannot find name 'google'.

Running this worked for me:

npm install @types/google-maps --save

Torietorii

Answer 8

I was using AGM and if well this problem exist was the product of other problem. That is here: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/48574 And the solution was: "I found a temporary solution, install an earlier version of @types/googlemaps in the package.json, I added @types/googlemaps: "3.39.12" to my devDependencies, now the production build works !" If you will be try this , first run: npm uninstall @types/google-maps

Pindling