Algolia Instantsearch.js in Ionic 3

Question

私はIonic 3アプリ内でAlgoliaのinstantsearch.jsライブラリを使用しようとしています。ここに私が従ったチュートリアルがあります。ここで

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のせずに、それを輸入しようとしています。それだけで必要なモジュールをインポートします方法

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