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:

angular-6-elasticsearch-example-quick-start-node-modules

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

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:

Practice

1. Generate Service & Component

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

=> Project Structure:

angular-6-elasticsearch-example-quick-start-structure

=> App Module:
app.module.ts

2. ElasticSearch Service

elasticsearch.service.ts

2. Test Component

test-es.component.ts

test-es.component.html

4. App Component

app.component.ts

app.component.html

5. Check Result

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

angular-6-elasticsearch-example-quick-start-result

Open Browser Console, we can see:

angular-6-elasticsearch-example-quick-start-result-console

Source Code

Angular6Elasticsearch

By grokonez | August 13, 2018.



Related Posts


Got Something To Say:

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

*