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.

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 **

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:

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:

Re-install your Angular 6 Project:
npm install

Use ElasticSearch in Angular 6 Project

1. Import and use


2. Add CORS config

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

3. Ping to test

Write the code below to ping to ElasticSearch:

Open Browser to check, it should be:


1. Generate Service & Component

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

=> Project Structure:


=> App Module:

2. ElasticSearch Service


2. Test Component



4. App Component



5. Check Result

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


Open Browser Console, we can see:


Source Code


By grokonez | August 13, 2018.

Related Posts

Got Something To Say:

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