typescript Angular 6 应用程序找不到命名空间“google”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51677452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 application cannot find namespace 'google'
提问by Murphy4
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+
它在过去版本的 angular 中用作解决方案。现在我使用的是 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-ignoreabove 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.
我可以通过// @ts-ignore在所有使用谷歌地图的行上方插入来快速修复问题，但我对真正的修复更感兴趣。但事实上，这有效让我觉得这是一个 tsconfig 问题，我对此不太有信心。
I can confirm that googlemaps is installed inside node_modules/@types, but I am not sure about the 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"
]
}
}
I created a Stackblitz Examplewhich throws a Reference Error if you view the console. I don't know what to try next.
我创建了一个Stackblitz 示例，如果您查看控制台，它会抛出一个参考错误。我不知道接下来要尝试什么。
回答by Vaibhav Kumar Goyal
So I came across the problem earlier on GitHub and this worked for me:
所以我早些时候在 GitHub 上遇到了这个问题，这对我有用：
npm install --save-dev @types/googlemapsAdding 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>
npm install --save-dev @types/googlemaps添加到我所有的
tsconfig*.json：types: [ "googlemaps"]在我的文件顶部添加：
declare const google: any;在 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.
试试看，告诉我它是否有效。
回答by Robert Tamlyn
The tsconfig.json file that really needs to be updated is in src/tsconfig.app.json.
真正需要更新的tsconfig.json文件在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.
该文件使用空数组覆盖根目录中 tsconfig.json 文件的 compilerOptions 的 types 属性，因此您必须在那里添加 googlemaps 的类型定义。
For example:
例如：
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["googlemaps"]
},
"exclude": ["test.ts", "**/*.spec.ts"]
}回答by Martyn Verhaegen
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:
将它添加到我的 tsconfig 编译器选项的 types 数组中从未奏效。但是如果你安装了@types/googlemaps，你可以在你的 .ts 文件的顶部使用：
/// <reference types="@types/googlemaps" />
/// <reference types="@types/googlemaps" />
参见 三重斜线指令
回答by Mab Kiani
I fixed it by installing @types/google-mapsnot @types/googlemaps
我通过安装@types/google-maps而不是 @types/googlemaps 来修复它
just run this
只需运行这个
npm install @types/google-maps --save
and import google in your component using
并使用在您的组件中导入 google
import { google } from "google-maps";
回答by Edd Nú?ez
I've found something, if you are using AGM you can fix it importing:
我发现了一些东西，如果你使用 AGM 你可以修复它导入：
import {} from '@agm/core/services/google-maps-types';
回答by Nitesh Jangir
Recently I came across this issue and it occurs due to many reasons I mention all the possible solution here:
最近我遇到了这个问题，它发生的原因有很多，我在这里提到了所有可能的解决方案：
Solution 1:
解决方案1：
i) If you haven't enabled your google Places API to go through this link linkto enable it.
i) 如果您尚未启用您的 google Places API，请通过此链接链接启用它。
ii) install @types/googlemaps in your project using npm i @types/googlemaps --save-devfor more details click here
ii) 在您的项目中安装 @types/googlemaps 使用npm i @types/googlemaps --save-dev更多详细信息点击这里
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 answeron StackOverflow.
iii)"types": ["googlemaps"]将此添加到您的 tsconfig.json 大部分案例文件名是 tsconfig.app.json 如果您对类型感到好奇，请查看StackOverflow 上的这个答案。
iv) restart your server
iv) 重新启动您的服务器
In most cases, there is no need for declaring any google variable and the above solution works in my case also.
在大多数情况下，不需要声明任何 google 变量，上述解决方案也适用于我的情况。
Solution 2:
解决方案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.
如果解决方案 1 不起作用<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>，请将其包含在您的 index.html 中并将您的 api 密钥放在此链接中。
in one of my project solution 2 works.
在我的项目解决方案 2 之一中。
Solution 3:
解决方案3：
and if solution 1 and solution 2 do not work write this code in your ts file declare const google: any;
如果解决方案 1 和解决方案 2 不起作用，请在您的 ts 文件中编写此代码 declare const google: any;
I hope this will be helpful.
我希望这会有所帮助。
Thanks
谢谢
