TypeScript Error: Cannot find namespace 'google'

Question

I have project angular-cli

~root~/src/typings.json

{
  "globalDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
    "google.maps": "registry:dt/google.maps#3.20.0+20160914131659"
  }
}

~root~/typings/index.d.ts

/// <reference path="globals/angular-protractor/index.d.ts" />
/// <reference path="globals/es6-shim/index.d.ts" />
/// <reference path="globals/google.maps/index.d.ts" />
/// <reference path="globals/hammerjs/index.d.ts" />
/// <reference path="globals/jasmine/index.d.ts" />
/// <reference path="globals/selenium-webdriver/index.d.ts" />

~root~/src/tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types",
      "../typings"
    ],
    "files": [
      "../typings/index.d.ts"
    ]
  }
}

After run ng serve I have error message in console

ERROR in [default] F:~root~\src\app\ui\google-map\map-marker\map-marker.directive.ts:7:26

Cannot find namespace 'google'

and

ERROR in [default] ~root~\src\app\trip-entry-page\trip-entry-page.component.ts:188:21

Cannot find name 'google'

~root~\src\app\ui\google-map\map-marker\map-marker.directive.ts:7:26

... 
@Input() veyoMapMarker: google.maps.MarkerOptions 
...

~root~\src\app\trip-entry-page\trip-entry-page.component.ts:188:21

... 
if (status === google.maps.DirectionsStatus.OK) { 
...

After build app correct working

How me resolve this Error messages?

Did you find a solution to this issue? I am having the same problem. — Ben Cameron
– Ben Cameron, Commented Dec 12, 2016 at 20:35
Did the below answer help you? If so can you mark it as the accepted answer so others can find it. — Ben Cameron
– Ben Cameron, Commented Jan 27, 2017 at 10:26
Please refer to my answer here: stackoverflow.com/a/42733315/1087131 I'm using CLI RC0. — Stephen Paul
– Stephen Paul, Commented Mar 11, 2017 at 9:01
"ERROR TS6137: Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'." — Kyoss
– Kyoss, Commented Apr 12, 2021 at 17:47

Stephen Paul · Accepted Answer · 2017-05-31 08:21:36Z

41

A bit of a late response but I had a similar issue using Angular CLI RC.0.

It turned out that I hadn't install and imported the typings, which can be done as follows:

npm install --save-dev @types/googlemaps

import {} from '@types/googlemaps';

edited May 31, 2017 at 8:21

answered Mar 11, 2017 at 9:37

Stephen Paul

39.4k18 gold badges100 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aamir Khan Over a year ago

Aren't typings NOT supposed to be imported? I mean I haven't had to import any other typings I have installed.

Stephen Paul Over a year ago

Usually I don't import typings, because I have the npm library in my node_modules. This time, we need to download the google maps script at runtime so that's why the typings need to separately installed imported. See my complete answer here: stackoverflow.com/questions/36064697/…

Domske Over a year ago

Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'. But the folder exists node_modules/@types/googlemaps with the index.d.ts file. -.-

MaBbKhawaja · Accepted Answer · 2019-09-23 12:54:21Z

10

I was facing same problem and what I did was, I just removed these

import { } from 'googlemaps';
declare var google: any;

from my component.ts and add "types": [ "googlemaps" ] in my tsconfig.app.json . . Now my tsconfig.app.json looks like this.

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

And its working perfectly.

answered Sep 23, 2019 at 12:54

MaBbKhawaja

90010 silver badges17 bronze badges

1 Comment

Shulz Over a year ago

This solved the issue for me in vuejs

Diego Alberto Zapata Häntsch · Accepted Answer · 2022-05-07 19:10:04Z

7

I run on the same issue but I installed the recommended package from the documentation

npm i -D @types/google.maps

and then in my file or in the main file you can import it as follows

import '@types/google.maps';

this approach solves my issue with the google.maps namespace and its types.

Regards.

answered May 7, 2022 at 19:10

Diego Alberto Zapata Häntsch

1,20620 silver badges27 bronze badges

2 Comments

extraxt Over a year ago

Using Vue3 + Vite I had to add import '@types/google.maps' in my src/types/global.d.ts file and it solved the issue. Thanks! Before, I added "types": ["google.maps"] in my tsconfig.app.json file but it only worked for .vue files.

lpares12 Over a year ago

For me none of these solutions worked. Vue3 + Vite on ubuntu.

Failed to resolve entry for package "@types/google.maps". The package may have incorrect main/module/exports specified in its package.json.

when trying to import from anywhere.

Rehan Sattar · Accepted Answer · 2020-08-31 10:36:13Z

4

For anyone in Vue js facing this issue, you can add the following line at the top of your script section. Make sure you have installed @types/googlemaps.

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

answered Aug 31, 2020 at 10:36

Rehan Sattar

4,1154 gold badges16 silver badges22 bronze badges

1 Comment

extraxt Over a year ago

Yes, it works! Thanks. The only difference is that I'm using the @types/google.maps package. As soon as I dropped this comment at the top of my util file, the errors were gone.

Mab Kiani · Accepted Answer · 2019-11-20 16:01:47Z

3

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

answered Nov 20, 2019 at 16:01

Mab Kiani

5845 silver badges18 bronze badges

Comments

gamal · Accepted Answer · 2020-12-21 04:47:55Z

For Angular 9.****

I tried installing @types/googlemaps, It did not work for me.

I downgrade it to "@types/googlemaps": "3.39.12" then worked perfectly fine.

this is my code

In tsconfig.app.json (add googlemaps to types array)

"types": [
      "googlemaps"
    ]

In app module.ts

import { AgmCoreModule } from '@agm/core';
.
.
.
.
 imports: [
    BrowserModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: '...KEY...',
      libraries: ['places']
    })
  ],

To downgrade @types/googlemaps, go to pakage.json file in the project root folder and change @types/googlemaps version to "3.39.12". it's better if you delete files form

node_module -> @types -> googlemaps

Then in the terminal enter

npm install

Nimantha · Accepted Answer · 2021-12-21 05:18:58Z

2

All you need to do is import the package by:
```
npm install @types/google-maps --save
```

Add "types": [ "googlemaps" ] in my tsconfig.app.json . . Now my tsconfig.app.json looks like this:

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

edited Dec 21, 2021 at 5:18

Nimantha

6,5476 gold badges32 silver badges78 bronze badges

answered Jul 11, 2021 at 17:54

Mouad Chaouki

5785 silver badges7 bronze badges

Comments

Ben Cameron · Accepted Answer · 2016-12-12 21:14:02Z

1

Try to run the below command in a node prompt...

typings install dt~google.maps --global --save

answered Dec 12, 2016 at 21:14

Ben Cameron

4,4636 gold badges54 silver badges78 bronze badges

Comments

Ahmed Shehatah · Accepted Answer · 2019-02-19 12:28:14Z

0

I had the same problem with angular 7. I did not need to import anything just run npm install @types/googlemaps again and if there is any vulnerabilities, run npm audit fix or npm audit fix --force if needed.

After I did so, everything worked fine for me...

answered Feb 19, 2019 at 12:28

Ahmed Shehatah

6685 silver badges11 bronze badges

Collectives™ on Stack Overflow

TypeScript Error: Cannot find namespace 'google'

9 Answers 9

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related