CODEWITHSUNDEEP
angulartypescriptnamespacestsconfig
Murphy4
Murphy4

Reputation: 1531

Angular 6 application cannot find namespace 'google'

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.

Upvotes: 30

Views: 27300

Answers (8)

ROB
ROB

Reputation: 131

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

Upvotes: 0

Sheldon
Sheldon

Reputation: 215

For anyone using AGM running into this error:

Cannot find name 'google'.

Running this worked for me:

npm install @types/google-maps --save

Upvotes: 1

Vaibhav
Vaibhav

Reputation: 1499

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.

Upvotes: 48

Nitesh Jangir
Nitesh Jangir

Reputation: 33

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

Upvotes: 2

Mab Kiani
Mab Kiani

Reputation: 584

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";

Upvotes: 7

Martyn Verhaegen
Martyn Verhaegen

Reputation: 141

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

Upvotes: 8

Edd N&#250;&#241;ez
Edd N&#250;&#241;ez

Reputation: 61

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

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

Upvotes: 4

Robert Tamlyn
Robert Tamlyn

Reputation: 343

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"]
}

Upvotes: 11

Related Questions