How to use geocoder in Angular 2+ project?

Question

Angular

Good evening comrades!
I need to do some work in Angular using Yandex maps. First, I created an Angular 2+ project following the instructions , installed a special component from npm angular2-yandex-maps . This component is good for everyone, has rich functionality, is well documented, there are many code examples. But it is impossible to build routes on I-maps with its help, but this is exactly what I need.
Then I went the other way, installed the ymaps component according to the instructions. Added a line to the polyfills.ts file

(window as any).global = window;

in my component file did

import ymaps from 'ymaps';

In general, this is the code:

import {Component, OnInit} from '@angular/core';
import ymaps from 'ymaps';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  map: any;
  points = ['Москва, метро Смоленская', 'Москва, метро Арбатская', [55.734876, 37.59308]];
  multiRoute: any;

  ngOnInit() {
    ymaps.load('https://api-maps.yandex.ru/2.1/?lang=ru_RU').then(maps => {
      this.map = new maps.Map('map', {
        center: [55.75, 37.6],
        zoom: 8,
        controls: ['geolocationControl', 'zoomControl']
      });
      this.multiRoute = new maps.multiRouter.MultiRoute({
        referencePoints: this.points
      }, {
        boundsAutoApply: true,
        reverseGeocoding: true,
        viaPointDraggable: true
      });
      new maps.geocode('Москва', {result: 1}).then(res => {
        console.log(res);
      }, err => {
        console.log(err);
      });
      this.renderRoute();
    })
      .catch(error => console.log('Failed to load Yandex Maps', error));
  }

  addPoint(point: string) {
    if (point === '') {
      return;
    }
    this.points.push(point);
    this.updateRoute();
    this.geoCoder(point);
    // this.map.setCenter([55.818, 37.513]);
  }

  dellPoint(i: number) {
    this.points.splice(i, 1);
    this.updateRoute();
  }

  renderRoute() {
    this.map.geoObjects.add(this.multiRoute);
    this.multiRoute.editor.start();
  }

  updateRoute() {
    this.multiRoute.model.setReferencePoints(this.points);
    this.map.options.set('mapStateAutoApply', true);
  }

  geoCoder(point: any) {
    new ymaps.geocode('Москва', {result: 1}).then(res => {
      console.log(res);
    }, err => {
      console.log(err);
    });
  }
}

Everything works great. A map is being created, a route is being built. But I don't understand how to use the geocoder in this project. If I execute the code inside ngOnInit, then everything is fine, I get the object in the console.

ngOnInit() {
    ymaps.load('https://api-maps.yandex.ru/2.1/?lang=ru_RU').then(maps => {
        new maps.geocode('Москва', {result: 1}).then(res => { console.log(res); }, err => { console.log(err); });
    });
}

If I execute the same code in a separate function, I get an error

ERROR TypeError: "ymaps__WEBPACK_IMPORTED_MODULE_1___default.a.geocode is not a constructor"

geoCoder(point: any) {
    new ymaps.geocode('Москва', {result: 1}).then(res => {
      console.log(res);
    }, err => {
      console.log(err);
    });
  }

And I need to use the geocoder in a separate function inside my component and pass parameters to it. How to be?

Answer 1

If I run the same code

it's not the same code

ymaps.load('https://api-maps.yandex.ru/2.1/?lang=ru_RU').then(maps => {
  new maps
})

and
there is a difference