Algolia Instantsearch.js in Ionic 3

Question

Algolia의 instantsearch.js 라이브러리를 my Ionic 3 앱에서 사용하려고합니다. 다음은 제가 따라 한 튜토리얼입니다. 여기

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

내가 이미 다음 명령을 NPM을 통해 수입

_WEBPACK_IMPORTED_MODULE_3_instantsearch_js__.instantsearch is not a function 

를 얻을 수 있다는 오류입니다.

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> 

.

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

그 방법을 그것을 유일한 필요한 모듈을 가져올 것이다 : 여기

은을 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 가져올 수있다 Angular2/Ionic 응용 프로그램으로 작업해야합니다.

당신이 여기에 우리의 통합 책의 Angular2/이온 응용 프로그램 내에서 instantsearch.js을 통합하는 방법에 대한 자세한 내용을 원한다면 : https://community.algolia.com/instantsearch.js/v2/guides/angular-integration.html

을 우리는 또한 각도-instansearch 라이브러리를 제공하기 위해 적극적으로 노력하고 있습니다를, 이것은 다음 달에 발생할 것입니다. 베타 프로그램 참여에 관심이 있으시면이 문서를 작성하십시오 : https://docs.google.com/forms/u/2/d/e/1FAIpQLSeqEHS0VjnNlaKMp7Cm0y7pRe2pLz-39y3-cEAs5o-H0-HD6A/viewform?usp=send_form