Cannot find name 'google' angular 8

Question

As it shows error during build.

ERROR in app/pages/TestPage4/TestPage4.ts:27:27 - error TS2304: Cannot find name 'google'.

27 this.geoCoder = new google.maps.Geocoder; ~~~~~~ app/pages/TestPage4/TestPage4.ts:29:32 - error TS2304: Cannot find name 'google'.

29 const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement); ~~~~~~ app/pages/TestPage4/TestPage4.ts:33:24 - error TS2503: Cannot find namespace 'google'.

33 const place: google.maps.places.PlaceResult = autocomplete.getPlace(); ~~~~~~

Here is my code below.

import { Component, OnInit, ElementRef, ViewChild, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';

@Component({
  selector: 'app',
  templateUrl: './TestPage4.html',
  styleUrls: ['./TestPage4.css']
})

export class TestPage4 implements OnInit {
  lat: number;
  lng: number;
  zoom = 1;
  private geoCoder;

  @ViewChild('search', { static: false})
  public searchElementRef: ElementRef;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone) {}

  ngOnInit() {
    //load Places Autocomplete
    
    this.mapsAPILoader.load().then(() => { 
      this.geoCoder = new google.maps.Geocoder;

      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          console.log(place);
          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          for (var i = 0; i < place.address_components.length; i++) {
            let addressType = place.address_components[i].types[0];
            //if (componentForm[addressType]) {
            //  var val = place.address_components[i][componentForm[addressType]];
            //  document.getElementById(addressType).value = val;
            //}
            // for the country, get the country code (the "short name") also
            console.log(addressType);
            if (addressType == "country") {
              console.log(place.address_components[i].short_name);
              console.log(place.address_components[i].long_name);
            }
            else{
              console.log('---others---');
              console.log(place.address_components[i].short_name);
              console.log(place.address_components[i].long_name);
            }
          }

          //set latitude, longitude and zoom
          this.lat = place.geometry.location.lat();
          this.lng = place.geometry.location.lng();
          this.zoom = 12;
        }); 
      });
    });
  }
}

As i F12 it new google.maps.Geocoder and shows me it exists here below.
But in reality when built it shows the above error.

Update 1:

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "src",
    "paths": { "@angular/*": ["node_modules/@angular/*"] }
  }
}

This is the tsconfig.json file.

Update 2:
Using declare var google: any; works on
this.geoCoder = new google.maps.Geocoder; and
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement); but fails on google.maps.places.PlaceResult Cannot find namespace 'google' const place: google.maps.places.PlaceResult = autocomplete.getPlace();

Propst

Can you show your ts.config? The problems can be that default angular ts.config has types: [] (an empty array). In that case you need to add 'googlemaps' to types. – Theravada

@SherifElmetainy i think its tsconfig.json file i have updated above for the reference. – Propst

On your screenshot it's not google.maps class, it's just types for it. And your error says that you haven't imported google maps to your component – Mien

I already explained if have not imported in my component then why is it redirecting to when i use F12 to index.d.ts .. ? – Propst

@vitaliykotov it should show error in the typescript page as well .. ? – Propst

@Naman. Then the problem may be in tsconfig.app.json? – Theravada

@SherifElmetainy where can i find my tsconfig.app.json in angular 8 so that i can update the question .. – Propst

I have investigated how to use agm package and found this example. So it seems that the problem is in compiler which can't find google variable, although it's added by the package to the app. Thus you have to declare this variable like declare var google: any; – Mien

@vitaliykotov i tried this as well it works on (new google.maps.Geocoder) and (new google.maps.places.Autocomplete(this.searchElementRef.nativeElement)) but in the (google.maps.places.PlaceResult = autocomplete.getPlace();) it gives the error of map not found. – Propst

@vitaliykotov i'll update the question again – Propst

I would suggest to try this approach – Mien

@vitaliykotov i've answered my own question and found the solution to it. – Propst

Answer 1

Found the solution its in the tsconfig.app.json.

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

Added only "googlemaps" in the types which was missing and the error went away. No need to add declare var google: any; will work great without it.

Propst

For npm package @angular/google-maps, use : "types": ["google.maps"] – Adamantine

Also... in your app.module.ts, I had an incomplete import and needed to add " libraries: ['places']" to it: AgmCoreModule.forRoot({ // developers.google.com/maps/documentation/javascript/… apiKey: '....', libraries: ['places'] – Buckley

Answer 2

Solution is

1. install npm i @types/[email protected]"
2. go to tsconfig.app.json and set the type to "types": ["googlemaps"]

Coccidioidomycosis

What Angular version you're at? I'm on v14, when npm i @types/googlemaps was told it's deprecated and auto-switching to @types/google.maps, and same Cannot find name 'google'. Tried your solution asked for @types/[email protected], still the same. – Divisor

Answer 3

The following worked for my use case, using Node 16:

% node --version
v16.17.1
% npm --version
8.15.0

Installed the Angular Google Maps module and types:

npm i @angular/google-maps --legacy-peer-deps
npm i @types/googlemaps --legacy-peer-deps

Note, if you're running a more recent version of Node, you can probably leave off the --legacy-peer-deps argument.

Then, adding the Google Map type to the "types" directive in tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "google.maps" /* DECLARE TYPE HERE */
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Finally able to make use of the Google Maps class:

new google.maps.Map(this.mapElement.nativeElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
});

Exenterate