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

Question

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

import { } from '@types/googlemaps';

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

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

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

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

我可以通过在所有使用 google 映射的行上方插入 // @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>

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

Answer 2

真正需要更新的tsconfig.json文件在src/tsconfig.app.json.

该文件用空数组覆盖根目录中 tsconfig.json 文件的编译器选项的类型属性，因此您必须在此处添加 googlemaps 的类型定义。

例如：

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

Answer 3

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

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

Answer 4

将它添加到我的 tsconfig 编译器选项的类型数组中从未奏效。但是如果你安装了@types/googlemaps，你可以在你的 .ts 文件的顶部引用它：

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

比照。 Triple Slash Directives

Answer 5

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

来修复它

就运行这个

npm install @types/google-maps --save

并使用

在您的组件中导入 google

import { google } from "google-maps";

Answer 6

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

解决方案一：

i) 如果您还没有启用您的 google 地点 API 通过此 link link 来启用它。

ii) 使用 npm i @types/googlemaps --save-dev 在您的项目中安装 @types/googlemaps 有关详细信息，请单击 here

iii) 将 "types": ["googlemaps"] 添加到您的 tsconfig.json 如果您对类型感兴趣，请在 Whosebug 上查看此大多数案例文件名是 tsconfig.app.json。

iv) 重启你的服务器

在大多数情况下，不需要声明任何 google 变量，上述解决方案也适用于我的情况。

方案二：

如果解决方案 1 不起作用，请将此 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> 包含在您的 index.html 中，并将您的 api 密钥放入此 link.

在我的一个项目解决方案 2 中有效。

方案三：

如果解决方案 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'

Angular 6 application cannot find namespace 'google'

angular

typescript

namespaces

tsconfig