Angular 5 autocomplete geolocation npm install not working

Question

In my Angular 5 project I want to implement google autocomplete geolocation. I got some reference of npm modules:-

1. https://www.npmjs.com/package/ng4-geoautocomplete

2. https://www.npmjs.com/package/ngx-google-places-autocomplete

   According to their guidance when I am going to install that module I am facing some warning:

Installation command:-

 npm install --save ng4-geoautocomplete

Warnings:-

    ***npm WARN ngx-slideshow@0.1.0 requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-slideshow@0.1.0 requires a peer of @angular/common@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng4-geoautocomplete@0.1.0 requires a peer of @angular/core@>=2.0.0 <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ ng4-geoautocomplete@0.1.0
added 68 packages in 96.971s***

My project version:-

   Angular CLI: 1.7.4
Node: 8.9.3
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Why I am facing this problem and what will be the solution?

Is there any other way to implement google autocomplete geolocation?

Answer 1

Yes.

npm install @agm/core --save-dev
npm install @types/googlemaps --save-dev

app.module.ts

import {AgmCoreModule}  from '@agm/core' 
.
.
.
 imports: [
    .
    .
    .
    AgmCoreModule.forRoot({
      apiKey: 'your api key',
      libraries: ['places']
    }),
    .
    .
    .
 ]

in your html

<div>
   <input type="text" placeholder="Search for location" autocorrect="off" name="" spellcheck="off" #autoSearch/>
</div>

component.ts file

import {Component, ViewChild, ElementRef, NgZone, OnInit} from '@angular/core' 
import { MapsAPILoader } from '@agm/core';
import {} from @types/googlepmaps;
.
.
.

export class YourComponent implements OnInit {
  @ViewChild('autoSearch') public searchElement: ElementRef;

  consturctor (private mapsAPILoader: MapsAPILoader  , private ngZone : NgZone ) 
  {}

  ngOnInit() {
     this.mapsAPILoader.load().then(
       () => {        
         let autocomplete = new 
         google.maps.places.Autocomplete(this.searchElement.nativeElement, 
         {types:["address"]});

        autocomplete.addListener("place_changed", ()=> {
          this.ngZone.run(()=>{
            let place: google.maps.places.PlaceResult = 
             autocomplete.getPlace();

            if(place.geometry === undefined || place.geometry === null) {
              return;
            }
         })
       })
     }      
    );      
  }
}

I rather use the AGM library rather than just the autocomplete that you are using because the autocomplete only gives you autcomplete fucntionalty whether the AGM can be use to render the google maps with the markers.

Now,

to install dependencies yourself to fix your warnings you can reference to this stackoverflow question: How to install npm peer dependencies automatically?