Angular 6 应用程序找不到命名空间“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.

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.

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

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

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

Answer 5

我发现了一些东西，如果你使用 AGM 你可以修复它导入：

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

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

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

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