Problem getting ng-ais-instantsearch to work

I am using Angular 8.2.14/npm 6.0.1/Node 12.14.1 and have installed AIS using:

$npm install algoliasearch@3 angular-instantsearch@beta instantsearch.js@3
$npm install --save-dev @types/algoliasearch

Here’s a listing:

$npm list algoliasearch
+-- algoliasearch@3.35.1
`-- angular-instantsearch@3.0.0-beta.5
  `-- algoliasearch@3.35.1 deduped

But when trying to build with it, I’m getting the following errors:

$ng serve --ssl
10% building 3/3 modules 0 activei ?wds?: Project is running at https://localhost:4200/webpack-dev-server/
i ?wds?: webpack output is served from /
i ?wds?: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.05 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 1.34 MB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.28 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2020-10-30T19:19:27.856Z - Hash: 2890de5395a9e54c6de6 - Time: 13565ms

ERROR in ../node_modules/algoliasearch-helper/index.d.ts:6:8 - error TS1259: Module '"F:/bobc/projects/TangleMyData/website/SmartAdminTemplate/node_modules/@types/algoliasearch/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

6 import algoliasearch, {
         ~~~~~~~~~~~~~

  ../node_modules/@types/algoliasearch/index.d.ts:2173:1
    2173 export = algoliasearch;
         ~~~~~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
../node_modules/algoliasearch-helper/index.d.ts:31:5 - error TS2709: Cannot use namespace 'SearchOptionsV4' as a type.

31   ? SearchOptionsV4
       ~~~~~~~~~~~~~~~
../node_modules/algoliasearch-helper/index.d.ts:34:5 - error TS2709: Cannot use namespace 'SearchResponseV4' as a type.

34   ? SearchResponseV4<T>
       ~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **
i ?wdm?: Failed to compile.

I did see the warning on the Algolia Install page:

image

Is AIS v3 compatible with Angular 8? If not, is there a beta that I can participate in, that is compatible?

Thanks,
Bob

Hi @engineering, AIS v3 is compatible with Angular 8 but not Angular 9. You should enable esmoduleinterop typescript option iirc to resolve your issue.

Thanks for the reply, Cindy. I did add esmoduleinterop to my tsconfig.json as shown below, but I do not know what you mean by option iirc - can you please explain?

BTW: I use typescript v3.5.3

Thanks,
Bob

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext", 
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "target": "es2015", 
    "types": ["node"],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Hi @engineering, sorry, the isn’t an option you should use. Is it still not working with the esModuleInterop included? Are you still getting the same error?

Hi Cindy,

Adding esModuleInterop brought up a dozen other errors, some as shown below, in addition to the AIS errors mentioned earlier. I was hoping iirc was the fix.

Thanks,
Bob

Errors Due to Including esModuleInterop:

147     searchFunction?: (helper: AlgoliaSearchHelper) => void;

app/+app-views/+calendar/shared/EVENTS_MOCK.ts:8:14 - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof moment' has no compatible call signatures.

8     "start": moment().subtract(15, 'day').startOf('day').add(21, 'hours'),
               ~~~~~~~~

  app/+app-views/+calendar/shared/EVENTS_MOCK.ts:2:1
    2 import * as moment from 'moment'
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.
app/+app-views/+calendar/shared/EVENTS_MOCK.ts:15:14 - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof moment' has no compatible call signatures.

15     "start": moment().subtract(12, 'day').startOf('day'),

Hi @engineering, The errors in your screenshot appear to be with the moment library instead of Algolia. Are there other Algolia errors that appear? Are you using the moment library in your code or is that dependency from another library? If it’s a library you are using, I’ve had smaller file sizes and better luck with date-fns, however I’ve not used it with typescript or angular before.

Hi Cindy,

I have fixed all the moment errors, I now only have the two AIS related errors:

Build Results:

$ng serve --ssl
10% building 3/3 modules 0 activei ?wds?: Project is running at https://localhost:4200/webpack-dev-server/
i ?wds?: webpack output is served from /
i ?wds?: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.05 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 1.34 MB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.28 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2020-11-01T20:53:09.595Z - Hash: b7ef230137e8e3751f7b - Time: 13538ms

ERROR in ../node_modules/algoliasearch-helper/index.d.ts:31:5 - error TS2709: Cannot use namespace 'SearchOptionsV4' as a type.

31   ? SearchOptionsV4
       ~~~~~~~~~~~~~~~
../node_modules/algoliasearch-helper/index.d.ts:34:5 - error TS2709: Cannot use namespace 'SearchResponseV4' as a type.

34   ? SearchResponseV4<T>
       ~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **
i ?wdm?: Failed to compile.

Hi Cindy,

Before following the instructions at https://www.algolia.com/doc/guides/building-search-ui/installation/angular/ I had followed the instructions from a page I found that had me install several node modules. I uninstalled all of that, and only followed the instructions on the Algolia Installation page, and that cleared up most problems. Now, I only have the error shown in the results below.

Any idea what the fix is?

Thanks,
Bob

Build Results:

$ng serve --ssl
10% building 3/3 modules 0 activei ?wds?: Project is running at https://localhost:4200/webpack-dev-server/
i ?wds?: webpack output is served from /
i ?wds?: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.05 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 1.34 MB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.23 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2020-11-01T21:32:00.743Z - Hash: 87c284721832ae56c219 - Time: 13117ms

ERROR in ../node_modules/angular-instantsearch/instantsearch/instantsearch.d.ts:147:31 - error TS2709: Cannot use namespace 'AlgoliaSearchHelper' as a type.

147     searchFunction?: (helper: AlgoliaSearchHelper) => void;
                                  ~~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **
i ?wdm?: Failed to compile.

Hi Cindy,

I’ve modified line 147 in instantsearch.d.ts from this:
searchFunction?: (helper: AlgoliaSearchHelper) => void;
to this:
searchFunction?: (helper: any) => void;

It’s really a kludge, and I don’t like doing it, but I’d like to make some progress on the UI. Please let me know if a true solution is available.

Thanks,
Bob

hey @engineering, do you think you could set up this in a GitHub repository so we can see in a live environment what should change? I think it might be possible there’s a mismatch with @types/algoliasearch-helper & algoliasearch-helper (when using v3 the former is not correct)

Hi Haroen,

@types/algoliasearch-helper is not installed, but algoliasearch-helper is installed. (see below)

I cannot setup a Github repository for this, but I am willing to do a zoom (or other conferencing app) so that we can look around my app together.

$npm list @types/algoliasearch-helper
-- (empty)

$npm list algoliasearch-helper
+-- angular-instantsearch@3.0.0-beta.5
> -- algoliasearch-helper@2.28.1
-- instantsearch.js@3.7.0
-- algoliasearch-helper@2.28.1 deduped

Thanks,
Bob