Angular 5 автозаполнение геолокации npm установка не работает

Question

В моем проекте Angular 5 я хочу реализовать геолокацию Google с автозаполнением.Я получил некоторые ссылки на модули npm: -

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

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

   В соответствии с их руководством, когда я собираюсь установить этоМодуль, с которым я сталкиваюсь, предупреждает:

Команда установки: -

 npm install --save ng4-geoautocomplete

Предупреждения: -

    ***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***

Версия моего проекта: -

   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

Почему я сталкиваюсь с этой проблемой и каково ее решение?

Есть ли другой способ реализации геолокации автозаполнения Google?

Answer 1

Да.

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']
    }),
    .
    .
    .
 ]

в вашем html

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

файле component.ts

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;
            }
         })
       })
     }      
    );      
  }
}

Я скорее использую библиотеку AGM, а не просто используемое вами автозаполнение, потому что автозаполнение дает вам только возможность автозаполнения, если AGM можно использовать для рендеринга карт Google с маркерами.

Теперь,

Для самостоятельной установки зависимостей для исправления предупреждений вы можете обратиться к этому вопросу о стеке потока: Как автоматически установить зависимости одноранговых узлов npm?