TypeScript 错误：找不到命名空间“google”

Posted 2023-03-13

【中文标题】TypeScript 错误：找不到命名空间“google”

【英文标题】：TypeScript Error: Cannot find namespace 'google'

【发布时间】：2017-02-15 23:58:02

【问题描述】：

我有项目 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 serve 我在控制台中有错误消息

[默认]中的错误 F:~root~\src\app\ui\google-map\map-marker\map-marker.directive.ts:7:26

找不到命名空间“google”

和

[默认]中的错误 ~root~\src\app\trip-entry-page\trip-entry-page.component.ts:188:21

找不到名称“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)  
...

构建应用程序正常工作后

我如何解决此错误消息？

【问题讨论】：

您找到解决此问题的方法了吗？我也有同样的问题。

以下答案对您有帮助吗？如果是这样，您可以将其标记为已接受的答案，以便其他人可以找到它。

请参考我的回答：***.com/a/42733315/1087131我正在使用 CLI RC0。

“错误 TS6137：无法导入类型声明文件。请考虑导入 'googlemaps' 而不是 '@types/googlemaps'。”

【参考方案1】：

回复有点晚，但我在使用 Angular CLI RC.0 时遇到了类似问题。

原来我没有安装和导入typings，可以这样做：

npm install --save-dev @types/googlemaps

import  from '@types/googlemaps';

【讨论】：

不应该导入类型吗？我的意思是我不必导入我已安装的任何其他类型。

通常我不导入类型，因为我的 node_modules 中有 npm 库。这一次，我们需要在运行时下载 google maps 脚本，这就是为什么打字需要单独安装导入的原因。在这里查看我的完整答案：***.com/questions/36064697/…

Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'。但是该文件夹存在node_modules/@types/googlemaps 与 index.d.ts 文件。 -.-

【参考方案2】：

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

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

来自我的 component.ts 并添加 “类型”：[ “谷歌地图” ] 在我的 tsconfig.app.json . . 现在我的 tsconfig.app.json 看起来像这样。

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

而且它工作得很好。

【讨论】：

这解决了我在 vuejs 中的问题

【参考方案3】：

在 IONIC 4 中，我通过安装 @types/google-maps 而不是 @types/googlemaps

来修复它

运行这个

npm install @types/google-maps --save

并使用

在您的组件中导入

google

import  google  from "google-maps";

【参考方案4】：

对于 Angular 9.****

我尝试安装 @types/googlemaps，但对我不起作用。

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

这是我的代码

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

"types": [
      "googlemaps"
    ]

在应用模块.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

【参考方案5】：

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

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

【参考方案6】：

您需要做的就是通过以下方式导入包：

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"
    ]

【参考方案7】：

我在使用 Angular 7 时遇到了同样的问题。 我不需要导入任何东西，只需再次运行npm install @types/googlemaps，如果有任何漏洞，请运行npm audit fix 或npm audit fix --force（如果需要）。

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

【参考方案8】：

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

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