Пользовательский виджет мгновенного поиска Angular - свойство «Уточнить» не существует для типа «объект»

Я создал настраиваемый виджет окна поиска в своем приложении Angular, и он отлично работает в режиме разработки. В тот момент, когда я создаю проект (ng build --prod), я получаю следующую ошибку:

Свойство «уточнять» не существует для типа «объект».

CustomWidget.ts

import { Component, Inject, forwardRef, OnInit } from '@angular/core';
import { BaseWidget, NgAisInstantSearch, } from 'angular-instantsearch';
import { connectSearchBox } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'app-search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.css']
})
export class SearchBoxComponent extends BaseWidget {

  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('SearchBox');
  }
  public ngOnInit() {
    this.createWidget(connectSearchBox);
    super.ngOnInit();
  }
}

CustomWidget..html

<div class="relative p-4 px-8">
  <input type="search" (input)="state.refine($event.target.value)">
</div>

Примечание. При импорте connectSearchBox есть 3 крошечные точки сразу после from. При наведении курсора появляется следующее сообщение:

[ts] Не удалось найти файл декларации для модуля Instantsearch.js / es / connector. '/node_modules/instantsearch.js/es/connectors/index.js' неявно имеет тип 'любой'.

Заглянув в модули узлов, можно найти InstantSearch.js / es / коннекторы, за которыми следуют дополнительные папки для каждого типа компонента по внешнему виду, например, 'search-box'.

BaseWidget.d.ts

import { OnDestroy, OnInit } from '@angular/core';
export declare class Widget {
    init: () => void;
    getConfiguration: () => object;
    render: (params: {
        templatesConfig: object;
        state: object;
        results: {}[];
        createURL: (value: any) => string;
        instantSearchInstance: object;
    }) => void;
    dispose: (params: {
        helper: object;
        state: object;
    }) => object | void;
}
export declare type Connector = (renderFn: (state: object, isFirstRendering: boolean) => void, unmountFn: () => void) => (widgetOptions?: object) => Widget;
export declare class BaseWidget implements OnInit, OnDestroy {
    instantSearchParent: any;
    autoHideContainer?: boolean;
    widget?: Widget;
    state?: object;
    cx: Function;
    constructor(widgetName: string);
    createWidget(connector: Connector, options?: object): void;
    ngOnInit(): void;
    ngOnDestroy(): void;
    updateState: (state: {}, isFirstRendering: boolean) => void | Promise<void>;
    getItemClass(item: {
        isRefined?: boolean;
    }): any;
}

person Que    schedule 04.12.2018    source источник
comment
Здесь у вас есть две проблемы. Первый связан с объектом state, а второй связан с импортом connectSearchBox. Лучше поделитесь кодом BaseWidget, а также компонентом и фактическим путем 'nstantsearch.js/es/connectors.   -  person Sunil Singh    schedule 04.12.2018
comment
Привет, @SunilSingh - Спасибо за ответ! - Я обновил исходный пост. Компоненты .ts и .html уже есть. Я скопировал BaseWidget.d.ts из папки модулей узла Angular Instant Search. Что касается пути к соединителям, я предоставил небольшую информацию, но по сути я скопировал эту строку из их github. Спасибо еще раз за помощь.   -  person Que    schedule 04.12.2018


Ответы (1)


Решено. Ужасно с моей стороны, я пропустил здесь раздел документации:

https://community.algolia.com/angular-instantsearch/guides/customize-widgets.html - Раздел 3. Рендер из состояния

В настраиваемый виджет необходимо добавить следующее.

state: {
   refine: (value: string) => void;
}
person Que    schedule 04.12.2018