Angular 6 ElasticSearch - Quick Start - How to add Elasticsearch.js

In this tutorial, we’re gonna look at how to add ElasticSearch to an Angular 6 Project.

Contents

Install ElasticSearch
Add ElasticSearch to Angular 6 Project
- - 1. Install the type definition
  - 2. Add dependency
Use ElasticSearch in Angular 6 Project
Practice
Source Code

Install ElasticSearch

Go to ElasticSearch guide – Getting Started » Installation and follow step by step to install ElasticSearch.

Test local install of ElasticSearch
– by command line:
curl -XGET localhost:9200
– or enter http://localhost:9200/ url on your Browser.

The result should be like this:

{
   "name":"first_node_test",
   "cluster_name":"elasticsearch",
   "cluster_uuid":"E8eoz-uWT0Gxi-ygUIB10Q",
   "version":{
      "number":"6.3.2",
      "build_flavor":"unknown",
      "build_type":"unknown",
      "build_hash":"053779d",
      "build_date":"2018-07-20T05:20:23.451332Z",
      "build_snapshot":false,
      "lucene_version":"7.3.1",
      "minimum_wire_compatibility_version":"5.6.0",
      "minimum_index_compatibility_version":"5.0.0"
   },
   "tagline":"You Know, for Search"
}

{

"name":"first_node_test",

"cluster_name":"elasticsearch",

"cluster_uuid":"E8eoz-uWT0Gxi-ygUIB10Q",

"version":{

"number":"6.3.2",

"build_flavor":"unknown",

"build_type":"unknown",

"build_hash":"053779d",

"build_date":"2018-07-20T05:20:23.451332Z",

"build_snapshot":false,

"lucene_version":"7.3.1",

"minimum_wire_compatibility_version":"5.6.0",

"minimum_index_compatibility_version":"5.0.0"

"tagline":"You Know, for Search"

}

Add ElasticSearch to Angular 6 Project

1. Install the type definition

Run command:
npm install --save-dev @types/elasticsearch

You will see an elasticsearch directory in node_modules folder:

angular-6-elasticsearch-example-quick-start-node-modules

2. Add dependency

Open package.json in your Angular 6 Project, add:

...
"dependencies": {
	"elasticsearch-browser": "^15.1.1",
	...
},
...

...

"dependencies": {

"elasticsearch-browser": "^15.1.1",

...

Re-install your Angular 6 Project:
npm install

Use ElasticSearch in Angular 6 Project

1. Import and use

import * as elasticsearch from 'elasticsearch-browser';

//...

  private client: elasticsearch.Client

  private connect() {
    this.client = new elasticsearch.Client({
      host: 'localhost:9200',
      log: 'trace'
    });
  }

import * as elasticsearch from 'elasticsearch-browser';

//...

private client: elasticsearch.Client

private connect() {

this.client = new elasticsearch.Client({

host: 'localhost:9200',

log: 'trace'

});

}

or:

import { Client } from 'elasticsearch-browser';
//...

  private client: Client;

  private connect() {
    this.client = new Client({
      host: 'http://localhost:9200',
      log: 'trace'
    });
  }

import { Client } from 'elasticsearch-browser';

//...

private client: Client;

private connect() {

this.client = new Client({

host: 'http://localhost:9200',

log: 'trace'

});

}

2. Add CORS config

To work with ElasticSearch, we need to enable CORS by adding in /config/elasticsearch.yml:

http.cors.enabled : true
 
http.cors.allow-origin : "*"
http.cors.allow-methods : OPTIONS, HEAD, GET, POST, PUT, DELETE
http.cors.allow-headers : X-Requested-With,X-Auth-Token,Content-Type, Content-Length

http.cors.enabled : true

http.cors.allow-origin : "*"

http.cors.allow-methods : OPTIONS, HEAD, GET, POST, PUT, DELETE

http.cors.allow-headers : X-Requested-With,X-Auth-Token,Content-Type, Content-Length

3. Ping to test

Write the code below to ping to ElasticSearch:

this.client.ping({
  requestTimeout: Infinity,
  body: 'hello JavaSampleApproach!'
});

this.client.ping({

requestTimeout: Infinity,

body: 'hello JavaSampleApproach!'

});

Open Browser to check, it should be:

TRACE: 2018-08-13T07:34:46Z
  -> HEAD http://localhost:9200/
  hello grokonez!
  <- 200

TRACE: 2018-08-13T07:34:46Z

-> HEAD http://localhost:9200/

hello grokonez!

<- 200

Practice

1. Generate Service & Component

Run cmd:
– ng g s elasticsearch
– ng g c test-es

=> Project Structure:

angular-6-elasticsearch-example-quick-start-structure

=> App Module:
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestEsComponent } from './test-es/test-es.component';

@NgModule({
  declarations: [
    AppComponent,
    TestEsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { TestEsComponent } from './test-es/test-es.component';

@NgModule({

declarations: [

AppComponent,

TestEsComponent

imports: [

BrowserModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

2. ElasticSearch Service

elasticsearch.service.ts

import { Injectable } from '@angular/core';
import { Client } from 'elasticsearch-browser';
import * as elasticsearch from 'elasticsearch-browser';

@Injectable({
  providedIn: 'root'
})
export class ElasticsearchService {

  private client: Client;

  constructor() {
    if (!this.client) {
      this._connect();
    }
  }

  private connect() {
    this.client = new Client({
      host: 'http://localhost:9200',
      log: 'trace'
    });
  }

  private _connect() {
    this.client = new elasticsearch.Client({
      host: 'localhost:9200',
      log: 'trace'
    });
  }

  isAvailable(): any {
    return this.client.ping({
      requestTimeout: Infinity,
      body: 'hello grokonez!'
    });
  }
}

import { Injectable } from '@angular/core';

import { Client } from 'elasticsearch-browser';

import * as elasticsearch from 'elasticsearch-browser';

@Injectable({

providedIn: 'root'

})

export class ElasticsearchService {

private client: Client;

constructor() {

if (!this.client) {

this._connect();

}

private connect() {

this.client = new Client({

host: 'http://localhost:9200',

log: 'trace'

});

}

private _connect() {

this.client = new elasticsearch.Client({

host: 'localhost:9200',

log: 'trace'

});

}

isAvailable(): any {

return this.client.ping({

requestTimeout: Infinity,

body: 'hello grokonez!'

});

}

2. Test Component

test-es.component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ElasticsearchService } from '../elasticsearch.service';

@Component({
  selector: 'app-test-es',
  templateUrl: './test-es.component.html',
  styleUrls: ['./test-es.component.css']
})
export class TestEsComponent implements OnInit {
  isConnected = false;
  status: string;

  constructor(private es: ElasticsearchService, private cd: ChangeDetectorRef) {
    this.isConnected = false;
  }

  ngOnInit() {
    this.es.isAvailable().then(() => {
      this.status = 'OK';
      this.isConnected = true;
    }, error => {
      this.status = 'ERROR';
      this.isConnected = false;
      console.error('Server is down', error);
    }).then(() => {
      this.cd.detectChanges();
    });
  }

}

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

import { ElasticsearchService } from '../elasticsearch.service';

@Component({

selector: 'app-test-es',

templateUrl: './test-es.component.html',

styleUrls: ['./test-es.component.css']

})

export class TestEsComponent implements OnInit {

isConnected = false;

status: string;

constructor(private es: ElasticsearchService, private cd: ChangeDetectorRef) {

this.isConnected = false;

}

ngOnInit() {

this.es.isAvailable().then(() => {

this.status = 'OK';

this.isConnected = true;

}, error => {

this.status = 'ERROR';

this.isConnected = false;

console.error('Server is down', error);

}).then(() => {

this.cd.detectChanges();

});

}

test-es.component.html

<h3 class="col-md-12 text-center">Elasticsearch server status: {{status}}</h3>

1	<h3 class="col-md-12 text-center">Elasticsearch server status: {{status}}</h3>

4. App Component

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'grokonez';
  description = 'Angular - Elasticsearch';
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'grokonez';

description = 'Angular - Elasticsearch';

}

app.component.html

<div class="container" style="width: 400px">
	<div style="color: blue; margin-bottom: 20px">
		<h1>{{title}}</h1>
		<h3>{{description}}</h3>
	</div>
 
	<app-test-es></app-test-es>
</div>

<h1>{{title}}</h1>

<h3>{{description}}</h3>

</div>

<app-test-es></app-test-es>

</div>

5. Check Result

Run Angular 6 App, go to http://localhost:4200/:

angular-6-elasticsearch-example-quick-start-result

Open Browser Console, we can see:

angular-6-elasticsearch-example-quick-start-result-console

Source Code

Angular6Elasticsearch

By grokonez | August 13, 2018.

3 thoughts on “Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js”

KESAVULU says:
November 2, 2018 at 6:36 am
Hello sir, when i try to execute angular6elasticsearch application, i am getting below error. But here elasticsearch running.
Error:-
—-
grokonez
Angular – Elasticsearch
Elasticsearch server status: ERROR
console erro:-
—-
elasticsearch.js:31361 ERROR: 2018-11-02T06:18:29Z
Error: Request error, retrying
HEAD http://localhost:9200/ => Request failed to complete.
at Log.error (http://localhost:4200/vendor.js:71724:56)
at checkRespForFailure (http://localhost:4200/vendor.js:78332:18)
at XMLHttpRequest.xhr.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (http://localhost:4200/vendor.js:84621:7)
at XMLHttpRequest.wrapFn (http://localhost:4200/polyfills.js:3510:39)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2743:31)
at Object.onInvokeTask (http://localhost:4200/vendor.js:34899:33)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2742:36)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2510:47)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2818:34)
at invokeTask (http://localhost:4200/polyfills.js:3862:14)
localhost/:1 Access to XMLHttpRequest at ‘http://localhost:9200/’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
elasticsearch.js:31361 TRACE: 2018-11-02T06:18:29Z
-> HEAD http://localhost:9200/
<- 0
1. grokonez says:
  November 3, 2018 at 10:34 am
  Hi, have you done this step:
  Add_CORS_config
  1. Arda says:
    December 7, 2018 at 2:47 pm
    I’ve the same issue, and done that step.

Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js

Install ElasticSearch

Add ElasticSearch to Angular 6 Project

1. Install the type definition

2. Add dependency

Use ElasticSearch in Angular 6 Project

1. Import and use

2. Add CORS config

3. Ping to test

Practice

1. Generate Service & Component

2. ElasticSearch Service

2. Test Component

4. App Component

5. Check Result

Source Code

Post Tags

3 thoughts on “Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js”

Got Something To Say: Cancel reply

Install ElasticSearch

Add ElasticSearch to Angular 6 Project

1. Install the type definition

2. Add dependency

Use ElasticSearch in Angular 6 Project

1. Import and use

2. Add CORS config

3. Ping to test

Practice

1. Generate Service & Component

2. ElasticSearch Service

2. Test Component

4. App Component

5. Check Result

Source Code

Related Posts

Post Tags

3 thoughts on “Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js”

Got Something To Say: Cancel reply