typescript Angular 6 - @types/googlemaps/index.d.ts' 不是一个模块

Angular 6 - @types/googlemaps/index.d.ts' is not a module

提问by Kay

i just updated some packages in my package.json file. Then after running npm installi run ng serve. However i am now getting the following errors.

我刚刚更新了我的 package.json 文件中的一些包。然后运行后npm install我运行ng serve。但是我现在收到以下错误。

ERROR in ... File '.../node_modules/@types/googlemaps/index.d.ts' is not a module.
... error TS6137: Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'

I tried the suggested solution here - @types/googlemaps/index.d.ts' is not a moduleadding /// <reference types="@types/googlemaps" />at the top of my component.ts file however this did not fix my problem and the error persists.

我在这里尝试了建议的解决方案 - @types/googlemaps/index.d.ts' 不是/// <reference types="@types/googlemaps" />在我的 component.ts 文件顶部添加的模块，但这并没有解决我的问题，错误仍然存​​在。

---

---

package.json

包.json

{
  "name": "demo",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.7",
    "@angular/cdk": "^6.0.0",
    "@angular/common": "^6.1.7",
    "@angular/compiler": "^6.1.7",
    "@angular/core": "^6.1.7",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "^6.1.7",
    "@angular/http": "^6.1.7",
    "@angular/material": "^6.0.0",
    "@angular/platform-browser": "^6.1.7",
    "@angular/platform-browser-dynamic": "^6.1.7",
    "@angular/router": "^6.1.7",
    "@auth0/angular-jwt": "^2.0.0",
    "@types/chartjs": "0.0.31",
    "@types/googlemaps": "^3.30.13",
    "@types/lodash": "^4.14.108",
    "auth0-js": "^9.5.1",
    "auth0-lock": "^11.6.1",
    "chart.js": "^2.7.2",
    "chartjs-plugin-annotation": "^0.5.7",
    "chartjs-plugin-datalabels": "^0.3.0",
    "core-js": "^2.5.5",
    "d3": "^5.1.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "json-formatter-js": "^2.2.0",
    "lodash": "^4.17.10",
    "lodash-es": "^4.17.10",
    "moment": "^2.22.1",
    "npm": "^6.0.0",
    "progressbar.js": "^1.0.1",
    "rxjs": "^6.3.2",
    "rxjs-compat": "^6.1.0",
    "ua-parser-js": "^0.7.18",
    "wordcloud": "^1.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "6.2.2",
    "@angular/compiler-cli": "^6.1.7",
    "@angular/language-service": "^6.1.7",
    "@types/d3": "^5.0.0",
    "@types/d3-dsv": "^1.0.31",
    "@types/jasmine": "~2.8.7",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash-es": "^4.17.0",
    "@types/node": "~8.9.4",
    "codelyzer": "^4.3.0",
    "eslint": "^4.19.1",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^1.0.0",
    "protractor": "~5.3.1",
    "source-map-explorer": "^1.5.0",
    "ts-node": "~6.0.3",
    "tslint": "~5.10.0",
    "typescript": "~2.9.2"
  }
}

tsconfig.json

配置文件

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": ["googlemaps"],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

component.ts

组件.ts

/// <reference types="@types/googlemaps" />
import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
import { } from '@types/googlemaps';

采纳答案by Neyxo

You probably don't need this line in your component.ts file (It's only for Angular <6):

您的 component.ts 文件中可能不需要这一行（仅适用于 Angular <6）：

import { } from '@types/googlemaps';

Here's an (basic/minimal) example for Angular 6:

这是 Angular 6 的（基本/最小）示例：

/// <reference types="@types/googlemaps" />
map: google.maps.Map;
this.map = new google.maps.Map(....);

Basically, if you want to use it in Angular <6, you have to add it via the importmethod. In Angular 6+ you have to add it via the referencemethod. You shouldn't add both at the same time.

基本上，如果你想在 Angular <6 中使用它，你必须通过import方法添加它。在 Angular 6+ 中，您必须通过reference方法添加它。您不应同时添加两者。

Hope I could help.

希望我能帮上忙。

回答by Midori

For Angular6~

对于 Angular6~

1. npm install @types/googlemaps --save-devor yarn add @types/googlemaps
2. Add "googlemaps"to tsconfig.app.jsontypes array

1. npm install @types/googlemaps --save-dev或者 yarn add @types/googlemaps
2. 添加"googlemaps"到tsconfig.app.json类型数组

1. Add "googlemaps"to tsconfig.spec.jsontypes array

3. 添加"googlemaps"到tsconfig.spec.json类型数组

1. Add /// <reference types="@types/googlemaps" />on the first line of your component.ts file. This line will import @types/googlemaps. (Line1 of example below)
2. Declare google variable as declare let google: any;(Line6 of example below)

4. 添加/// <reference types="@types/googlemaps" />到您的 component.ts 文件的第一行。这一行将导入@types/googlemaps。（下面示例的第 1 行）
5. 将 google 变量声明为declare let google: any;（下面示例的第 6 行）

Ref:

参考：

• https://stackoverflow.com/a/52200117/10009565

• https://stackoverflow.com/a/52200117/10009565