1

I'm new to Angular and just tried creating my first directive for google maps autocomplete. But I'm having a problem in the directive.ts file. At the top I have a require that cannot be found so it fails to build the app.

const google = require('@types/googlemaps');

The error message says

ERROR in src/app/_directives/google-places.directive.ts(2,16): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try npm i @types/node and then add node to the types field in your tsconfig.

So I looked at my package.json file for "@types/node" and I see it.

   "devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@fortawesome/fontawesome-pro": "^5.9.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}

and then I looked at tsconfig.json for types, didn't see it, so I added it.

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

Then I did a rebuild, but still can't find the 'require' so the build fails.

Just for additional info, here is the directive file. Intellisense recommended I convert the 'require' to an import, so I did, but that didn't seem to fix it either. 

import {
  Directive,
  OnInit,
  ElementRef
} from '@angular/core';
const google = require('@types/googlemaps'); // error here with require
// import google = require('@types/googlemaps'); // doesn't work either

@Directive({
  selector: '[appGooglePlaces]'
})

export class GooglePlacesDirective implements OnInit {
  private element: HTMLInputElement;

  constructor(private elRef: ElementRef) {
    // elRef will get a reference to the element where
    // the directive is placed
    this.element = elRef.nativeElement;
  }

  ngOnInit() {
    const autocomplete = new google.maps.places.Autocomplete(this.element);
  }

}
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • I've never before had to require / import any @types module. Maybe what you want is just: const google = require('googlemaps'); ? – Niilo Keinänen Jul 15 '19 at 05:10
  • I'll post the answer. Because what the guide I'm following (link) and what teh developer has in his files are different. – chuckd Jul 15 '19 at 05:30

1 Answers1

0

Here's what I did to figure it out. Went to the devs github page and looked at his files. (different then what his guide says)

A. he had no import to @types/googlemaps like he did in his guide B. had this at the top of the directive ///

chuckd
  • 13,460
  • 29
  • 152
  • 331