Algolia Instantsearch.js в Ионическая 3

Question

Я пытаюсь использовать библиотеку instantsearch.js из Algolia в своем приложении Ionic 3. Вот учебник, которому я следовал.

https://angularfirebase.com/lessons/angular-full-text-search-with-algolia-frontend-part-1/

Вот ошибка, которую я получаю

_WEBPACK_IMPORTED_MODULE_3_instantsearch_js__.instantsearch is not a function

Я уже импортировал его через npm с помощью следующей команды.

npm install instantsearch.js --save

SearchPage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ALGOLIA_CONFIG } from './../../app/app.algolia.config';
import * as instantsearch from 'instantsearch.js';

@IonicPage()
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
})
export class SearchPage {

  search: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SearchPage');
    console.log(ALGOLIA_CONFIG);
    console.log(instantsearch)
    this.search = instantsearch(ALGOLIA_CONFIG);
    // search box widget
    this.search.addWidget(
      instantsearch.widgets.searchBox({
        container: '#search-box',
        autofocus: false,
        placeholder: 'Search for actors',
        poweredBy: true
      })
    );

    // initialize hits widget
    this.search.addWidget(
      instantsearch.widgets.hits({
        container: '#hits',
        templates: {
          empty: 'No results',
          item: `<img src=https://image.tmdb.org/t/p/w300{{image_path}} width="50px">
                <strong>Result {{objectID}}</strong>:
                {{{_highlightResult.name.value}}}`
        },
        escapeHits: true
      })
    );

    this.search.addWidget(
      instantsearch.widgets.stats({
        container: '#stats'
      })
    );

    this.search.addWidget(
      instantsearch.widgets.pagination({
        container: '#pagination',
        maxPages: 20,
      })
    );

    this.search.addWidget(
      instantsearch.widgets.analytics({
        pushFunction: (query, state, results) => {
          console.log(query)
          console.log(state)
          console.log(results)
        }
      })
    );

    this.search.start();
  }

}

search.html

<ion-header>

  <ion-navbar>
    <ion-title>Search</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <h1>Test Algolia</h1>

  <div id="search-box">
    <!-- SearchBox widget will appear here -->
  </div>
  <div id="stats">
    <!-- stats widget will appear here -->
  </div>
  <div id="hits">
    <!-- Hits widget will appear here -->
  </div>
  <div id="pagination">
    <!-- pagination widget will appear here -->
  </div>
</ion-content>

Я также попытался импортировать его без / es.

Вот вывод console.log(instantsearch)

{__esModule: true, default: ƒ}
default
:
ƒ Factory()
createQueryString
:
ƒ (state, options)
version
:
"2.2.1"
connectors
:
[Exception: ReferenceError: You can't access to 'instantsearch.connectors' directly from the ES6 build. Import the connectors this way 'import {connectSearchBox} from "instantsearch.js/connectors"' at Function.get (http://localhost:8100/build/0.js:9985:11) at Function.remoteFunction (<anonymous>:2:14)]
length
:
0
name
:
"Factory"
prototype
:
EventEmitter {constructor: ƒ, addWidget: ƒ, start: ƒ, createURL: ƒ, _render: ƒ, …}
widgets
:
[Exception: ReferenceError: You can't access to 'instantsearch.widgets' directly from the ES6 build. Import the widgets this way 'import {SearchBox} from "instantsearch.js/widgets"' at Function.get (http://localhost:8100/build/0.js:9979:11) at Function.remoteFunction (<anonymous>:2:14)]
get connectors
:
ƒ get()
get widgets
:
ƒ get()
__proto__
:
ƒ InstantSearch(_ref)
[[FunctionLocation]]
:
to-factory.js:5
[[Scopes]]
:
Scopes[3]
__esModule
:
true
__proto__
:
Object

Answer 1

Можете ли вы попробовать импортировать InstantSearch таким образом:

import instantsearch from 'instantsearch.js/es';
import { searchBox } from 'instantsearch.js/es/widgets'; 

Таким образом, он импортирует только необходимые модули и должен работать в приложении Angular2/Ionic.

Если вы хотите узнать больше о том, как интегрировать instantsearch.js в приложение Angular2/Ionic, вам следует прочитать наше руководство по интеграции здесь: https://community.algolia.com/instantsearch.js/v2/guides/angular-integration.html

Мы также активно работаем над выпуском библиотеки angular-instansearch, это произойдет в ближайшие месяцы. Если вы заинтересованы в присоединении к бета-программе, можете ли вы заполнить этот документ, пожалуйста: https://docs.google.com/forms/u/2/d/e/1FAIpQLSeqEHS0VjnNlaKMp7Cm0y7pRe2pLz-39y3-cEAs5o-H0-HD6A/viewform?usp=send_form

Answer 2

используйте этот импорт:

import instantsearch from 'instantsearch.js/dist/instantsearch'

использовать это событие жизненного цикла

ionViewWillEnter(){

  const options = environment.algolia;
  this.search = instantsearch(options);
  this.search.start();

  this.search.addWidget(
    instantsearch.widgets.searchBox({
      container: '#search-box',
      placeholder: 'search for doctors',
      // poweredBy: true
    })
  );

  // initialize hits widget
  this.search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      templates:{
        empty: 'No results',
        item:`
          <strong> Result : {{_highlightResult.name.value}}

        `
      },

    })
  );

  this.search.addWidget(
    instantsearch.widgets.pagination({
      container: '#pagination',
      maxPages: 2,
    })
  );
}

используйте свой же HTML. Это работает для меня