algolia: angular-instantsearch v2からv3へアップグレード

#algolia: angular-instantsearchv2からv3へのアップグレード

###V2の問題
v3にすれば使えるオプションが増えるのでぜひともアップグレードしたい。例えば現在はスマフォ対応できていない。リアルタイム検索なので文字入力すると瞬時に結果が返ってくるが、スマフォだとこんな具合↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/f9b2b4cf-e77c-dad9-6ef8-b4e595ede4f8.png)
キーパット画面が邪魔で見えない。
完了をタッチして閉じると検索結果も消えてしまう。

###アップグレードを試す
単純にアップグレードコマンドがうまくいかない

```cmd
$ npm install --save instantsearch@^3
```
Not Found 404 エラーになる。
参考：[Migration from v2 to v3](https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/angular/)




###インストールを試す
なのでスクラッチインストールを試みた（必ずGitしてから作業）
参考：[Installation
](https://www.algolia.com/doc/guides/building-search-ui/installation/angular/)

#####手順どおりにやってng buildすると次のエラー

```bash
import algoliasearch from 'algoliasearch/lite';
          ~~~~~~~~~~~~~

  ../node_modules/@types/algoliasearch/lite/index.d.ts:191:1
    191 export = algoliasearch;
        ~~~~~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
```

これはtsconfig.jsonをいじってからビルドしなおすとできた。
参考：https://github.com/visjs/vis-network/issues/67

```json
...
"allowSyntheticDefaultImports": true, <=追加
...
```

解決。

<br>
#####今度はサーチできない。
サーチするとThe indexName option is required.のエラー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/a8a02a4e-6589-fb0f-27c7-8f11fd78157d.png)


どうやらコンフィグの書き方が変わったようだ。
旧来の書き方

```typescript
Config = { 
          appId: 'TOxxxxxxM',
          apiKey: '8cefxxxxxxxxxxxxxxxxxxxc10',
          indexName: 'comments'
}
```

新しい書き方

```typescript
Config = {  
    indexName: 'comments',
    searchClient: algoliasearch('TOxxxxxxM', '8cefxxxxxxxxxxxxxxxxxxxc10')
  };
```

参考：[What Is Angular InstantSearch?
](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/angular/)


はい解決。

<br>
###では`<ais-search-box></ais-search-box>`を編集
今までV2では以下のようにplaceholderしか生きなかった。

```html
<ais-search-box placeholder="質問フォーラム内検索"></ais-search-box>
```

それが`[searchAsYouType]="false"`を追加してリアルタイム検索を解除できるように。

```html
<ais-search-box placeholder="質問フォーラム内検索" [searchAsYouType]="false" submitTitle="検索" resetTitle="クリア">
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/d39f2635-5ddf-3494-4c36-e39aa4c17062.png)
エンターキーを押すか🔍をクリックorタッチしないと検索しないようになるので、スマフォで入力したあと<strong>キー画面を閉じて検索ボタン（🔍）をタッチしてから結果を表示する</strong>という操作ができるようになった。

`…submitTitle="検索" resetTitle="クリア">`で勝手にボタンができるのかと思ったがそうではない。🔍と✖にマウスオーバーすると文字が表示されるだけ。まあ良い。
参考：[ais-search-box
](https://www.algolia.com/doc/api-reference/widgets/search-box/angular/)


###ページネーション

ページネーションは以下のように。

```html
<ais-pagination padding="2"></ais-pagination>
```
参考:[pagination](https://www.algolia.com/doc/api-reference/widgets/pagination/angular/)

<br>

###サニタイズ
検索結果の表示はすべてサニタイズされている。コメント欄はHTMLの解釈を許すようにしたかったが無理なようだ。

<br>
###ソート
カラム毎にソートしたりもできるようになった（replicaというものを作らなければならない）こんな感じ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/931b3476-286f-59aa-64d2-03fd2f29635b.png)

今の所は必要ないがそのうち作ろうと思う。

参考：[ais-sort-by
](https://www.algolia.com/doc/api-reference/widgets/sort-by/angular/)

<br>

###あとがき
algoliaインスタントサーチは情報が少ないので手探りでやっていくしかない。と思う。

<br>
参考：https://instantsearchjs.netlify.com/stories/?path=/story/basics-searchbox--search-on-enter
<br>