CODEWITHSUNDEEP
angulartypescriptangular-clitypescript-typings
mego4iter
mego4iter

Reputation: 430

TypeScript Error: Cannot find namespace 'google'

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?

Upvotes: 13

Views: 40317

Answers (9)

Diego Alberto Zapata H&#228;ntsch
Diego Alberto Zapata H&#228;ntsch

Reputation: 1196

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.

Upvotes: 6

Mouad Chaouki
Mouad Chaouki

Reputation: 578

  1. All you need to do is import the package by: 
    npm install @types/google-maps --save
  2. 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"
    ]
}

Upvotes: 2

gamal
gamal

Reputation: 1665

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

Upvotes: 2

Rehan Sattar
Rehan Sattar

Reputation: 4005

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

Upvotes: 3

Mab Kiani
Mab Kiani

Reputation: 584

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

Upvotes: 3

MaBbKhawaja
MaBbKhawaja

Reputation: 902

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.

Upvotes: 10

Ahmed Shehatah
Ahmed Shehatah

Reputation: 668

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...

Upvotes: 0

Stephen Paul
Stephen Paul

Reputation: 39035

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

Upvotes: 41

Ben Cameron
Ben Cameron

Reputation: 4433

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

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

Upvotes: 1

Related Questions