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


2 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.

    Error:-
    —-
    grokonez
    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

Got Something To Say:

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

*