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

user_1548432 0
Viewed 14040

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

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 module adding /// <reference types="@types/googlemaps" /> at the top of my component.ts file however this did not fix my problem and the error persists.

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';
angular typescript google-maps
2 Answers

For Angular6~

  1. npm install @types/googlemaps --save-dev or yarn add @types/googlemaps
  2. Add "googlemaps" to tsconfig.app.json types array

adding 'googlemaps' to tsconfig.app.json example (Line 6)

  1. Add "googlemaps" to tsconfig.spec.json types array

adding 'googlemaps' to tsconfig.app.json example (Line 8)

  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)

enter image description here

Ref:

user_100095650

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

import { } from '@types/googlemaps';

Here's an (basic/minimal) example for 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 import method. In Angular 6+ you have to add it via the reference method. You shouldn't add both at the same time.

Hope I could help.

user_79297070
Related