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

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

Update (Angular 6 – Elasticsearch 6):
Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js

Related Posts:
How to start SpringBoot ElasticSearch using Spring Data
Angular 4 ElasticSearch example – How to create an Index
Angular 4 ElasticSearch example – Add Document to Index
Angular 4 ElasticSearch example – Get All Documents in Index
Angular 4 ElasticSearch example – Documents Pagination with Scroll
Angular 4 ElasticSearch example – simple Full Text Search

** Elasticsearch Tutorials **

I. 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:

II. Add ElasticSearch to Angular 4 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-4-elasticsearch-example-quick-start-node-modules

2. Add dependency

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

Re-install your Angular 4 Project:
npm install

III. Use ElasticSearch in Angular 4 Project

1. Import and use

or:

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:

IV. Practice and Source Code

You can find more practice (with source code) such as creating an ElasticSearch Index at:
Angular 4 ElasticSearch example – How to create an Index

By grokonez | October 12, 2017.

Last updated on August 14, 2018.



Related Posts


16 thoughts on “Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js”

  1. I got below error while trying to execute this sample Elastic search (while Clicking Customers button). please help to fix it. so that i can able to understand more clearly.

    Thanks for guidance.

    1. Hi SeethaPartha,

      You should create jsa_customer_idx Index first.
      The simplest method for creating an index is using Kibana with statement:

      Regards,
      JSA.

      1. Hi, Thanks for that reply.

        Can you please guide me how to do full text search in all fields(More than one field) at a time.

        And also please guide me for doing pagination for this data.

  2. Hi er,

    I’m trying to use es with angular.
    I followed your install guide.
    but when I changed to ‘@^13.0.1’ on package.json
    it said
    No matching version found for @types/elasticsearch@^13.0.1

    could you help me a little more.

      1. I did.
        When I re-installed it says “No matching version found for @types/elasticsearch@^13.0.1”

        I using this plugin with ionic3 which use angular 4.

        so I added typeRoots value in tsconfig.json.

        and everything looks fine. but when I serve it

        Uncaught Error: Cannot find module “elasticsearch”

        my elastic-search.ts file.

  3. please can you help me

    i took this:
    IV. Practice and Source Code
    You can find more practice (with source code) such as creating an ElasticSearch Index at:
    Angular 4 ElasticSearch example – How to create an Index

    and i get this : Elasticsearch server status: ERROR

    JavaSampleApproach

    Angular4-SpringBoot Demo

    Elasticsearch server status: ERROR

    while elasticsearch has started i checked at localhost: 9200

    thanks

    1. Hi loulouXX,

      Please make sure that you install Elasticsearch correctly by checking cmd: curl -XGET localhost:9200.
      Then guarantee that CORS configuration is correct with this step: Add CORS config.

      Regards,
      JSA.

  4. Hello this tutorial is excellent to start working with elasticsearch. However, I have a problem when I put my project into production. I understand that the host changes as follows:

    In this way, the server runs perfectly (Elasticsearch server status: OK) but when I add a new customer I get the following error:

    o.Serialization {message: “Unable to parse/serialize body”, body: “”, status: 200, stack: “Error: Unable to parse/serialize body↵ at v (ht…polyfills.5d1d5b016f19755a7d41.bundle.js:1:35003)”}

    Please, I would appreciate your help. Thank you

Got Something To Say:

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

*