TypeScript Error: Cannot find namespace 'google'

Question

我有项目angular-cli

~root~/src/typings.json

{
  "globalDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
    "google.maps": "registry:dt/google.maps#3.20.0+20160914131659"
  }
}

~root~/typings/index.d.ts

/// <reference path="globals/angular-protractor/index.d.ts" />
/// <reference path="globals/es6-shim/index.d.ts" />
/// <reference path="globals/google.maps/index.d.ts" />
/// <reference path="globals/hammerjs/index.d.ts" />
/// <reference path="globals/jasmine/index.d.ts" />
/// <reference path="globals/selenium-webdriver/index.d.ts" />

~root~/src/tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types",
      "../typings"
    ],
    "files": [
      "../typings/index.d.ts"
    ]
  }
}

运行ng 服务后 我在控制台中收到错误消息

ERROR in [default] F:~root~\src\app\ui\google-map\map-marker\map-marker.directive.ts:7:26

Cannot find namespace 'google'

和

ERROR in [default] ~root~\src\app\trip-entry-page\trip-entry-page.component.ts:188:21

Cannot find name 'google'

~root~\src\app\ui\google-map\map-marker\map-marker.directive.ts:7:26

... 
@Input() veyoMapMarker: google.maps.MarkerOptions 
...

~root~\src\app\trip-entry-page\trip-entry-page.component.ts:188:21

... 
if (status === google.maps.DirectionsStatus.OK) { 
...

构建应用程序后正常工作

如何解决此错误消息？

Answer 1

尝试在节点提示符下运行以下命令...

typings install dt~google.maps --global --save

Answer 2

回复有点晚，但我在使用 Angular CLI RC.0.

时遇到了类似的问题

原来是我没有安装导入typings，可以这样操作：

npm install --save-dev @types/googlemaps

import {} from '@types/googlemaps';

Answer 3

我遇到了与 angular 7 相同的问题。我不需要再次导入任何东西运行 npm install @types/googlemaps 如果有任何漏洞，运行 npm audit fix 或 npm audit fix --force 如果需要的话。

在我这样做之后，一切对我来说都很好......

Answer 4

我遇到了同样的问题，我只是删除了这些

import { } from 'googlemaps';
declare var google: any;

来自我的 component.ts 并添加 "types": [ "googlemaps" ] 在我的 tsconfig.app.json . . 现在我的 tsconfig.app.json 看起来像这样。

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

它运行良好。

Answer 5

在 IONIC 4 中，我通过安装 @types/google-maps 而不是 @types/googlemaps[=12= 来修复它]

就运行这个

npm install @types/google-maps --save

并使用

在您的组件中导入google

import { google } from "google-maps";

Answer 6

对于 Vue js 中遇到此问题的任何人，您可以在脚本部分的顶部添加以下行。确保您已安装 @types/googlemaps.

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

Answer 7

对于 Angular 9.****

我试过安装@types/googlemaps，它对我不起作用。

我将它降级为 "@types/googlemaps": "3.39.12" 然后工作得很好。

这是我的代码

在 tsconfig.app.json 中（将 googlemaps 添加到类型数组）

"types": [
      "googlemaps"
    ]

在应用程序中 module.ts

import { AgmCoreModule } from '@agm/core';
.
.
.
.
 imports: [
    BrowserModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: '...KEY...',
      libraries: ['places']
    })
  ],

要降级@types/googlemaps，请转到项目根文件夹中的pakage.json 文件并将@types/googlemaps 版本更改为“3.39.12”。最好删除文件形式

node_module -> @types -> googlemaps

然后在终端输入

npm install

Answer 8

您需要做的就是通过以下方式导入包：
```
npm install @types/google-maps --save
```

在我的 tsconfig.app.json 中添加 "types": [ "googlemaps" ] 。 .现在我的 tsconfig.app.json 看起来像这样：

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

Answer 9

我运行遇到了同样的问题，但我安装了 documentation

推荐的软件包

npm i -D @types/google.maps

然后在我的文件或主文件中你可以按如下方式导入它

import '@types/google.maps';

这种方法解决了我关于 google.maps 命名空间及其类型的问题。

此致。

TypeScript Error: Cannot find namespace 'google'

TypeScript Error: Cannot find namespace 'google'

typescript

angular-cli

typescript-typings

angular