typescript - Angular 6 - '@types/googlemaps/index.d.ts' nu este un modul

Tocmai am actualizat câteva pachete în fișierul meu package.json. Apoi, după ce am rulat npm install, am rulat ng serve. Totuși, acum primesc următoarele erori.

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'

Am încercat soluția sugerată aici - '@types/googlemaps/index.d.ts' nu este un modul adăugând /// <reference types="@types/googlemaps" /> în partea de sus a fișierului meu component.ts, însă acest lucru nu a rezolvat problema și eroarea persistă.

package.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

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

Răspuns #1

Pentru Angular6~

  1. npm install @types/googlemaps --save-dev sau yarn add @types/googlemaps
  2. Adaugă "googlemaps" în array-ul types din tsconfig.app.json

  1. Adaugă "googlemaps" în array-ul types din tsconfig.spec.json

  1. Adaugă /// <reference types="@types/googlemaps" /> pe prima linie a fișierului tău component.ts. Această linie va importa @types/googlemaps. (Linia 1 din exemplul de mai jos)
  2. Declară variabila google ca declare let google: any; (Linia 6 din exemplul de mai jos)

Ref :

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

Răspunsul #2

Probabil că nu aveți nevoie de această linie în fișierul component.ts (Este doar pentru Angular <6):

import { } from '@types/googlemaps';

Iată un exemplu (de bază/minimal) pentru Angular 6:

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

Practic, dacă doriți să îl utilizați în Angular <6, trebuie să îl adăugați prin metoda import. În Angular 6+ trebuie să îl adăugați prin metoda reference. Nu ar trebui să adăugați ambele în același timp.

Sper că am putut ajuta.