Elasticsearch-js: Angular 2 Support?

[georgeedwards]

I see the angular notes in the READEME, but they seem aimed at AngularJS. Now Angular2.0 is released, can this be made angular2 compatible? Apologies if it is and I've missed the docs.

[spalger]

Pretty sure that it's compatible at some level, but it's been awhile since I made https://github.com/spalger/esjs-angular2-test. Can't remember the outcome...

[chernals]

I'd like to +1 this as it is not clear to me if something changed in the last releases of Angular2 and/or angular-cli (esp. since they moved to webpack). See my question on SO: http://stackoverflow.com/q/40681665/420892 .

Basically : I'm using angular-cli, installed both elasticsearch and elasticsearch-browser (although I'm not sure where the difference lies) and I'm trying to import { Client } from 'elasticsearch' with the errorCannot find module 'elasticsearch'.`.

[avgalon]

+1
import {Client} from 'elasticsearch';

Error in bail mode: [at-loader] src\app\core\es.service.ts:12:17
Cannot find name 'Client'.

[timothytavarez]

@avgalon @chernals Did you include the elasticsearch type defintion in your project?

1. Install elasticsearch type definition: typings i dt~elasticsearch
2. Make sure to update your tsconfig if necessary:

"typeRoots": [ "../typings/globals" ]

Worked for me. Good luck!

[sxmon]

@timothytavarez Thank you, I want to try this but can you explain more what to do ?

[timothytavarez]

@sxmon No problem.

Your TypeScript project contains a tsconfig.json. The tsconfig.json specifies root files and compiler options for your TypeScript project. Since TypeScript is strongly-typed/compiled, your TypeScript compiler needs to understand what code is being imported into your project (such as that from the Elasticsearch client.js).

We do this by adding the type definition file for the specific code (the Elasticsearch client) we're adding to our project. You can add a type definition using typings; following my above instructions.

Once you have installed the type definition file for elasticsearch (following my step 1), you just need to update your tsconfig.json to make sure you are including the new type definition (step 2). See the TypeScript documentation for more info on tsconfig.json.

[goku321]

@timothytavarez
Thanks! it worked!

[avgalon]

Thank you all for replying. I was way off when i search the problem...

Apparently, elasticsearch uses the global parameter process.
In our webpack production definitions, we had "process: false". changing it to true did the magic ;-)

[sxmon]

@timothytavarez Thank you. I tried it :

• I did a git clone from mgechev/angular-seed
• typings i dt~elasticsearch --global --save
• npm install elasticsearch --save
• I updated tsconfig : "typeRoots": [ "../typings/globals" ]
• npm install
• npm start

I got an error from typescript

elasticsearch/src/elasticsearch.js" implicitly has an any type

so I also switched to

"noImplicitAny": false,
in my tsconfig.

I imported the client
import { Client } from 'elasticsearch'
in my home.component.ts

and I tried to use it in ngOnInit in the same file :

let client = new Client({
            host: 'http://localhost:9200',
            log: 'trace'
        });

The page doesn't load and the console says :

http://localhost:5555/node_modules/elasticsearch.js
Failed to load resource: the server responded with a status of 404 (Not Found)

[sxmon]

@goku321 Do you have an example project working with elasticsearch ?

[goku321]

@sxmon No, I have just started with angular 2 and elasticsearch..I am a complete NOOB..
try this -> http://stackoverflow.com/questions/40681531/elasticsearch-and-angular-2

[sxmon]

I tried this from stackoverflow but it didn't work.

[sxmon]

I am now using webpack and it works !

[goku321]

@sxmon Can you tell me how did you do it?

[sxmon]

Elasticsearch service in Angular2 project using Webpack

git clone https://github.com/AngularClass/angular2-webpack-starter.git
npm install
npm install elasticsearch --save
npm install @types/elasticsearch --save

Add a directory in src/app/home named elasticsearch with the following files (remove .txt) :
elasticsearch.service.spec.ts.txt
index.ts.txt
elasticsearch.service.ts.txt

Now, in the file home.component.ts, you can use the service :
import { Elasticsearch } from './elasticsearch';
@Component({
.......
providers: [
....
Elasticsearch ],
.......
})

constructor( .... , public elasticsearch: Elasticsearch ) {}

Now you can call the test_search method with subscribe 👍
Like this :

this.elasticsearch.test_search().subscribe( (results) => { console.log(results); } );

What is more, if you want to test it with a mock backend :

In the file home.component.spec.ts :

import { Elasticsearch } from './elasticsearch';

toAddTo.home.component.spec.ts.txt

Before you test it, add this between beforeEach and .compileComponents :

.overrideComponent(HomeComponent, {
      set: {
        providers: [
          { provide: Elasticsearch, useClass: MockElasticsearch},
          RequestList
        ]
      }
    })

Your test will use the MockElasticsearch results this way.

[goku321]

@sxmon Thanks a lot!

[delvedor]

Hi! I'm closing this due to inactivity, if it is still an issue, please feel free to reopen! :)