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.

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

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:

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


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

Related Posts

Got Something To Say:

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