Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Angular v16 projects are unable to use angular-instantsearch #994

Open
kanehjeong opened this issue May 5, 2023 · 12 comments
Open

Angular v16 projects are unable to use angular-instantsearch #994

kanehjeong opened this issue May 5, 2023 · 12 comments

Comments

@kanehjeong
Copy link

kanehjeong commented May 5, 2023

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 🖥
Screenshot 2023-05-04 at 5 07 01 PM

Environment:

  • OS: Mac
  • Browser: Chrome
  • Version: 4.4.1
@NateMay
Copy link

NateMay commented May 5, 2023

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
Copy link

NateMay commented May 13, 2023

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
Copy link
Author

@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
Copy link

@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
Copy link

NateMay commented May 24, 2023

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
Copy link

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--
Copy link

johan-- commented Jun 13, 2023

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.

@dhayab dhayab pinned this issue Jun 21, 2023
@gethari
Copy link

gethari commented Aug 14, 2023

Hi Team, any update or workaround on this ?

@tgangso
Copy link

tgangso commented Aug 22, 2023

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

@tgangso
Copy link

tgangso commented Sep 5, 2023

Looks like this library is no longer maintained.

@gethari
Copy link

gethari commented Sep 6, 2023

Related to #1003

@loveraimogen
Copy link

We're moving the discussion over to an Algolia owned Issue #5924. Updates on this topic will be posted there.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants