Angular v16 projects are unable to use angular-instantsearch

[kanehjeong]

Describe the bug 🐛
Angular v16 was just released. It comes with a ton of new/updated features, but projects utilizing angular-instantsearch are unable to upgrade to it, due to the fact that ViewEngine support was completely removed in favor of Ivy.

To Reproduce 🔍

1. Create a new Angular v16 project, or migrate an existing project to Angular v16.
2. Start project using angular-instant-search
3. Gets error due to library not being Ivy compatible

Expected behavior 💭

• No error, able to use package as usual.

Screenshots 🖥

Environment:

• OS: Mac
• Browser: Chrome
• Version: 4.4.1

[NateMay]

Yeah, this is gonna be a big issue for all Angular developers looking to upgrade. I feel forced to downgrade back to Angular 15 until this is resolved.

[NateMay]

For all who follow, I dug into this repository and came to the following conclusion: This package has few weekly downloads, it will be a nightmare to update, and even if and when the team decides to upgrade it will have many breaking changes. If I were in charge of this project, I would probably decide not to update this library.

I've decided to abandon this library in favor of the vanilla algoliasearch library upon which this is built. It only took me an afternoon and I'm actually much happier with both the UI (which I now fully control), and the search functionality (which is no longer template driven), and I'm now on Angular 16 without those annoying compilation warnings.

Here is my core search service if you decide to get started down that path:

import { createBrowserLocalStorageCache } from '@algolia/cache-browser-local-storage';
import { createFallbackableCache } from '@algolia/cache-common';
import { createInMemoryCache } from '@algolia/cache-in-memory';
import { SearchOptions, SearchResponse } from '@algolia/client-search';
import { Injectable, inject } from '@angular/core';
import algoliasearch, { SearchClient, SearchIndex } from 'algoliasearch/lite';
import { merge } from 'lodash';

const staticSearchOptions: SearchOptions = Object.freeze({
  attributesToSnippet: ['description:200'],
  snippetEllipsisText: '…',
  removeWordsIfNoResults: 'allOptional',
});

const version = 1

@Injectable({ providedIn: 'root' })
export class AlgoliaService {

  /**
   * @description Connection to Algolia which caches requests and responses
   * in localStorage when available, and in memory otherwise.
   * @see https://tinyurl.com/2hfxbq3a
   */
  private readonly client: SearchClient = algoliasearch(
    yourAppID,
    yourSearchOnlyAPIKey,
    {
      responsesCache: createInMemoryCache(),
      requestsCache: createInMemoryCache({ serializable: false }),
      hostsCache: createFallbackableCache({
        caches: [
          createBrowserLocalStorageCache({
            key: `${version}-${yourAppID}`,
          }),
          createInMemoryCache(),
        ],
      }),
    }
  );

  private readonly index: SearchIndex = this.client.initIndex('your-index-name');

  search<A>(
    text: string,
    options: SearchOptions = {}
  ): Promise<SearchResponse<A>> {
    const finalOptions = merge({}, staticSearchOptions, options);    
    return this.index.search<A>(text, finalOptions);
  }
}

[kanehjeong]

@NateMay I actually came to the same conclusion soon after I posted this ticket since this project didn't seem that actively maintained and luckily we don't utilize algolia that heavily yet (we have 1 index).

I decided to keep this ticket open since it is an actual issue to be addressed (if ever). But for anyone looking to not be blocked, highly suggest what me and @NateMay did. The above is a good starting point for sure :)

[imbradyboy]

@NateMay curious to hear more about your use of algolia as I'm running into a similar issue. My hesitance around using the vanilla Algolia search library is that we require semi-complex querying on our index (eg. search, date ranges, refinement lists, and location-based search).

Our team has been extending the provided widgets to make all of these filters work together, but we've gotten to a point where the GeoSearch implementation for angular no longer fits our needs and is buggy.

My main question for you is, are you just using full-text search? Do you see yourself using more filters in the future?

[NateMay]

are you just using full-text search? Do you see yourself using more filters in the future?

I was extending widgets too, and I am (and was) using filters and facet searching, but no GeoSearch.

As you can see in the service that I provided above, you can pass a SearchOption object. The angular-instantsearch library managed this in the template but ultimately passed those options to the algoliasearch library. You'll have to learn the API, but there is nothing that can't be done since the former relies on the latter.

In my experience, my new implementation is much cleaner.

[imbradyboy]

are you just using full-text search? Do you see yourself using more filters in the future?

I was extending widgets too, and I am (and was) using filters and facet searching, but no GeoSearch.

As you can see in the service that I provided above, you can pass a SearchResponse object. The angular-instantsearch library managed this in the template but ultimately passed those options to the algoliasearch library. You'll have to learn the API, but there is nothing that can't be done since the former relies on the latter.

In my experience, my new implementation is much cleaner.

Yep, fair points. Thanks for the insight! We've been hesitant to go all in on the instantsearch library and invest that time, but seems that it may be our best option going forward. Appreciate you taking the time to respond!

[johan--]

Any ETA on adding Ivy compiler support? We are using this in an Angular app, and cannot upgrade to Angular 16 because of a dependency on this library.

[gethari]

Hi Team, any update or workaround on this ?

[tgangso]

Any heads up on whether or not this will be worked on or even is on the agenda? @aymeric-giraudet

[tgangso]

Looks like this library is no longer maintained.

[gethari]

Related to #1003