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

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

  1. Hello sir, when i try to execute angular6elasticsearch application, i am getting below error. But here elasticsearch running.

    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. Had this issue and i have figured out that there is another elasticsearch.yml

        Try the one under C:\ProgramData\Elastic\Elasticsearch\config
        Edit it and add the CORS cofiguration (responsibly) as the “*” is quite dangerous

        Hope this will help you

  2. I noticed in Angular7 it required me to specify that isAvailable() to include that it returns a Promise, otherwise I get a complaint that isAvailable is not a function.

  3. Access to XMLHttpRequest at ‘http://localhost:9200/index/****/***’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    i also getting the above error, can anyone tell how to solve this issue??

    information: Added below cors commands in my 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

Got Something To Say:

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