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

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

Related Posts:
Angular 12 ElasticSearch example – Add Document to Index
Angular 12 ElasticSearch example – Get All Documents in Index
Angular 12 ElasticSearch example – Documents Pagination with Scroll
Angular 12 ElasticSearch example – simple Full Text Search

** Elasticsearch Tutorials **

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"
}

Add ElasticSearch to Angular 12 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 12 Project, add:


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

Re-install your Angular 12 Project:
npm install

Use ElasticSearch in Angular 12 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'
    });
  }

or:


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

3. Ping to test

Write the code below to ping to ElasticSearch:


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 ozenero!
  <- 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 { }

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 ozenero!'
    });
  }
}

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();
    });
  }

}

test-es.component.html

<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 = 'ozenero';
  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>

5. Check Result

Run Angular 12 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

15 thoughts on “Angular 12 ElasticSearch – Quick Start – How to add Elasticsearch.js”

  1. 854127 352312Hello. fantastic job. I did not anticipate this. This really is a impressive story. Thanks! You made certain fine points there. I did a search on the subject matter and located the majority of folks will have exactly the same opinion along with your blog. 166164

  2. I don’t know if it’s just me or if perhaps everyone else encountering problems with your blog. It seems like some of the written text within your content are running off the screen. Can someone else please provide feedback and let me know if this is happening to them as well? This could be a problem with my internet browser because I’ve had this happen previously. Many thanks

  3. When I originally commented I clicked the -Notify me when new surveys are added- checkbox now each time a comment is added I recieve four emails sticking with the same comment. Possibly there is that is you can eliminate me from that service? Thanks!

  4. I really like your website.. pleasant colors & theme. Performed anyone design this website yourself or even did a person hire an attorney to make it work for you personally? Plz act in response since I!|m planning to style and design my personal weblog and also would want to realize wherever you became that from. thanks

  5. Hey there! Would you mind if I share your blog with my myspace group? There’s a lot of folks that I think would really enjoy your content. Please let me know. Thank you

  6. I simply could not leave your site before suggesting that I actually enjoyed the usual information a person supply for your visitors? Is going to be again continuously in order to inspect new posts

Leave a Reply

Your email address will not be published. Required fields are marked *