GeoSearchComponent in Angular Algolia V4 does not work

Hello, I recently updated my Angular project to version v4, so I did what your guide says, but now, a component gives me this error:

 Error: src/app/componentes/geo-search/geo-search.component.ts:13:14 - error TS2515: Non-abstract class 'GeoSearchComponent' does not implement inherited abstract member 'parentIndex' from class 'BaseWidget<any>'.
[ng] 13 export class GeoSearchComponent extends BaseWidget<any> {

The code is like this:

import { Component, forwardRef, Inject, Input, OnInit } from "@angular/core";
import { BaseWidget, NgAisInstantSearch } from "angular-instantsearch";
import { connectGeoSearch } from "instantsearch.js/es/connectors";
import { Observable, Subscription } from "rxjs";
import { styles } from "./../../styles";
declare var google: any;

@Component({
  selector: 'app-geo-search',
  templateUrl: './geo-search.component.html',
  styleUrls: ['./geo-search.component.scss'],
})
export class GeoSearchComponent extends BaseWidget {

  @Input() lat: number;
  @Input() lng: number;

  @Input() class: string = "not-mini";

  state: {
    items: { name: string; _geoloc: { lat: number; lng: number } }[];
  };

  styles = styles

  noneIcon: any = {
    url: "/assets/images/ub.png",
    scaledSize: {
      width: 1,
      height: 1
    },
  }
  icon: any = {
    url: "/assets/images/ub.png",
    scaledSize: {
      width: 40,
      height: 40
    },
    id: "pulse"
  }
  iconEmplex: any = {
    url: "/assets/images/ub_emplex.png",
    scaledSize: {
      width: 40,
      height: 40
    },
  }
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super("GeoSearchComponent");
  }

  get center() {
    if (this.lng && this.lat) {
      return { lat: this.lat, lng: this.lng };
    } else
      if (this.state.items && this.state.items.length > 0) {
        const [first] = this.state.items;
        return first._geoloc || { lat: 0, lng: 0 };
      }
    return { lat: 0, lng: 0 };
  }

  public ngOnInit() {
    this.createWidget(connectGeoSearch, {});
    super.ngOnInit();
    this.eventsSubscription = this.events.subscribe(() => setTimeout(() => {
      this.fitBounds();
    }, 100));
  }

  fO = {

  }

  mapa: any;
  mapReady(map) {
    this.mapa = map;
    this.fitBounds();
  }
  fitBounds() {
    if (!this.mapa) return;
    console.log("TRY TO FIT", this.state.items.length)
    const bonds: any = new google.maps.LatLngBounds();
    bonds.extend(new google.maps.LatLng(this.center.lat, this.center.lng));
    this.state.items.forEach(i => {
      console.log(i)
      bonds.extend(new google.maps.LatLng(i._geoloc.lat, i._geoloc.lng));
    });
    console.log(bonds)
    if (this.state.items.length || this.center)
      this.mapa.fitBounds(bonds);
    console.log(this.mapa)
  }

  private eventsSubscription: Subscription;

  @Input() events: Observable<void>;

  ngOnDestroy() {
    this.eventsSubscription.unsubscribe();
  }
}

My package looks like this:

"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@angular/common": "~12.2.3",
"@angular/core": "~12.2.3",
"agm-direction": "^0.8.8",
"algoliasearch": "^4.10.5",
"angular-instantsearch": "^4.0.0",
}
devDependencies:{
"typescript": "~4.3.5"
}

Please, help me I`ve been trying to fixed for several days.


I also added: “instantsearch.js”: “^4.25.0-experimental-typescript.0”, but keeps in the exactly same way, is there anyone how made this widget work with v4?

This part needs to be updated for v4 as marked in the changelog (EDIT I just realised this part is missing, will add it)

 constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super("GeoSearchComponent");
  }
1 Like

Hi Haroen,

Thanks for this, this solution has actually helped me solve some of the errors on an issue I was having.

I do however have one other issue left.

If you would be so kind as to take a look as I’m under pressure to get this solution out of the door and I cannot find the relevant information anywhere for this and there are no available V4 examples at this moment in time.

https://discourse.algolia.com/t/angular-instantsearch-autocomplete-problems/13434/4