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();

我可以通过在所有使用Google Maps的行上方插入// @ts-ignore来快速解决此问题，但我对真正的解决方法更感兴趣。但是这个方法使我感到这是一个tsconfig问题，我对此并不十分自信。

我可以确认googlemaps已安装在node_modules / @ types中，但是

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中：类型：[“ googlemaps”]
在文件顶部添加：声明const google：any;
在我的index.html正文的末尾添加：

<脚本异步延迟类型=“ text / javascript” src =“ https://maps.googleapis.com/maps/api/js?key=****”>

尝试一下，告诉我是否可行

Answer 2

将其添加到tsconfig编译器选项的types数组中从未成功。但是，如果您安装了@ types / googlemaps，则可以使用以下代码在.ts文件顶部进行引用：

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

cf。 Triple Slash Directives

Answer 3

我发现了一些东西，如果您使用的是AGM，则可以修复导入问题：

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

Answer 4

真正需要更新的tsconfig.json文件位于src / tsconfig.app.json中。

该文件会使用空数组覆盖根目录下tsconfig.json文件的tsconfig.json文件的editorOptions的types属性，因此您必须在其中添加googlemaps的类型定义。

例如：

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

Answer 5

我通过安装 @ types / google-maps 而不是 @ types / googlemaps

来修复它

只需运行

npm install @types/google-maps --save

并使用

将Google导入您的组件中

import { google } from "google-maps";

Answer 6

最近我遇到了这个问题，由于很多原因，在这里我提到了所有可能的解决方案，所以它发生了

解决方案1：

i）如果您尚未使Google Places API能够通过此链接link来启用它。

ii）使用npm i @types/googlemaps --save-dev在项目中安装@ types / googlemaps了解更多详细信息，请单击here

iii）将"types": ["googlemaps"]添加到tsconfig.json中，如果您对类型感到好奇，大多数情况下的文件名为tsconfig.app.json。在StackOverflow上查看此answer。

iv）重新启动服务器

在大多数情况下，无需声明任何google变量，并且上述解决方案对我而言也适用。

解决方案2：

如果解决方案1无效，请在您的index.html中添加此<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>并将您的api密钥放在此链接中。

在我的项目解决方案2之一中工作。

解决方案3：

如果解决方案1和解决方案2无法正常工作，请将此代码写入您的ts文件declare const google: any;

我希望这会有所帮助。

谢谢

Answer 7

对于使用AGM遇到此错误的任何人：

Cannot find name 'google'.

运行此命令对我有用：

npm install @types/google-maps --save

Answer 8

我正在使用 AGM，如果这个问题存在，则是其他问题的产物。就是在这里：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/48574 而解决方案是： “我找到了一个临时解决方案，在 package.json 中安装了早期版本的 @types/googlemaps，我将 @types/googlemaps: "3.39.12" 添加到我的 devDependencies，现在生产构建工作了！如果您要尝试此操作，请先运行： npm uninstall @types/google-maps

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

8 个答案: