Angular 6 应用程序找不到命名空间 'google'

Question

这个问题在很多地方都出现过类似的，解决办法就是简单的加上

import { } from '@types/googlemaps';

在过去版本的 Angular 中作为解决方案。现在问题出现了，因为我正在使用 Angular 6+

TS2304: Cannot find name 'google'.
TS2503: Cannot find namespace 'google'.

在我使用谷歌地图类型的任何地方都有很多这样的错误。例如:

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

我可以通过在所有使用谷歌地图的行上方插入 //@ts-ignore 来快速修复问题，但我对真正的修复更感兴趣。但这个有效的事实让我觉得这是一个 tsconfig 问题，我对此不是很有信心。

我可以确认 googlemaps 安装在 node_modules/@types 中，但我不确定 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"
    ]
  }
}

我创建了一个 Stackblitz Example如果您查看控制台，它会抛出一个引用错误。我不知道接下来要尝试什么。

Answer 1

所以我早些时候在 GitHub 上遇到了这个问题，这对我有用:

• npm install --save-dev @types/googlemaps

• 添加到我所有的 tsconfig*.json : types: [ "googlemaps"]

• 在我的文件顶部添加:declare const google: any ;

• 在我的正文末尾添加 index.html :

  <script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=****"> </script>

试一试，告诉我它是否有效。