In this tutorial, we’re gonna look at how to add ElasticSearch to an Angular 6 Project.
Related Posts:
– Angular 6 ElasticSearch example – Add Document to Index
– Angular 6 ElasticSearch example – Get All Documents in Index
– Angular 6 ElasticSearch example – Documents Pagination with Scroll
– Angular 6 ElasticSearch example – simple Full Text Search
** Elasticsearch Tutorials **
Contents
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "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:
2. Add dependency
Open package.json in your Angular 6 Project, add:
|
1 2 3 4 5 6 |
... "dependencies": { "elasticsearch-browser": "^15.1.1", ... }, ... |
Re-install your Angular 6 Project:
npm install
Use ElasticSearch in Angular 6 Project
1. Import and use
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import * as elasticsearch from 'elasticsearch-browser'; //... private client: elasticsearch.Client private connect() { this.client = new elasticsearch.Client({ host: 'localhost:9200', log: 'trace' }); } |
or:
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 4 5 |
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:
|
1 2 3 4 |
this.client.ping({ requestTimeout: Infinity, body: 'hello JavaSampleApproach!' }); |
Open Browser to check, it should be:
|
1 2 3 4 |
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:
=> App Module:
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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
|
1 |
<h3 class="col-md-12 text-center">Elasticsearch server status: {{status}}</h3> |
4. App Component
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 5 6 7 8 |
<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 6 App, go to http://localhost:4200/:
Open Browser Console, we can see:
