title: Angular 6 - @types/googlemaps/index.d.ts' is not a module
body: <p>i just updated some packages in my package.json file. Then after running <code>npm install</code> i run <code>ng serve</code>. However i am now getting the following errors.</p>
  
  <pre><code>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'
  </code></pre>
  
  <p>I tried the suggested solution here - <a href="https://stackoverflow.com/questions/51084724/types-googlemaps-index-d-ts-is-not-a-module">@types/googlemaps/index.d.ts&#39; is not a module</a> adding <code>/// &lt;reference types="@types/googlemaps" /&gt;</code> at the top of my component.ts file however this did not fix my problem and the error persists.</p>
  
  <hr>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
    "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"
      ]
    }
  }
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>/// &lt;reference types="@types/googlemaps" /&gt;
  import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
  import { } from '@types/googlemaps';
  </code></pre>