angular 6 ERROR ReferenceError: "process is not defined" with elasticsearch js

Question

Before everything, I read:

question 1 regarding process is not defined

question 2 regarding process is not defined

angular 5 question

browser build info

And none of the presented info helped. I'm using Angular 6 and I want to send query to elasticsearch, using elasticsearch js. I installed elasticsearch, elastic types and elastic browser like so:

npm install elasticsearch
npm install @types/elasticsearch
npm install elasticsearch-browser

I tried installing with --save, with --save-dev and without, to no avail.

Then I created a new project with angular cli:

import { Component } from '@angular/core';
import { Client } from "elasticsearch";

@Component({
  selector: 'app-root',
  template: `
<script src="/node_modules/elasticsearch/src/elasticsearch.js"></script>
  <div class="container">
  <div class="row">
      <button type="" (click)="onSendElastic()">Click Me!</button>
  </div>
</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  elClient: Client

  onSendElastic(){
    console.log('clicked on send elstic');
    this.connect()
    let res = this.elSearch()
    console.log(`res: ${res}`);

  }

  connect(){
    console.log('start connect...');

    this.elClient = new Client({
      host:"http://elasticIp:9200",
      log:"trace"
    })
    this.elClient.ping({
      requestTimeout:2000
    },(err)=>{
      if(err){
        console.log('err');
      }
      else{
        console.log('everything is ok');

      }
    })
  }

  elSearch(){
    console.log('start search...');

    return this.elClient.search({
      index:"elastic_index",
      type:"doc",
      body:{
        "query":{
          "term":{
            "field1":"true"
          }
        }
      }
    })
  }
}

I added the <script> tag because some answers that I found suggested this, but it didn't helped.

The format of is taken from: https://www.npmjs.com/package/elasticsearch. When I start the project, by running ng start or npm start, When I press the button I get:

clicked on send elstic; start connect... ERROR ReferenceError: "process is not defined" addOutputhttp://localhost:4200/vendor.js:100911:7Loghttp://localhost:4200/vendor.js:100749:5Transporthttp://localhost:4200/vendor.js:101610:27EsApiClienthttp://localhost:4200/vendor.js:99098:22Clienthttp://localhost:4200/vendor.js:99141:10connecthttp://localhost:4200/main.js:104:25onSendElastichttp://localhost:4200/main.js:98:9View_AppComponent_0ng:///AppModule/AppComponent.ngfactory.js:14:23handleEventhttp://localhost:4200/vendor.js:39410:16callWithDebugContexthttp://localhost:4200/vendor.js:40503:22debugHandleEventhttp://localhost:4200/vendor.js:40206:12dispatchEventhttp://localhost:4200/vendor.js:36869:16renderEventHandlerClosurehttp://localhost:4200/vendor.js:37313:38decoratePreventDefaulthttp://localhost:4200/vendor.js:47314:36invokeTaskhttp://localhost:4200/polyfills.js:2743:17onInvokeTaskhttp://localhost:4200/vendor.js:33108:24invokeTaskhttp://localhost:4200/polyfills.js:2742:17runTaskhttp://localhost:4200/polyfills.js:2510:28invokeTaskhttp://localhost:4200/polyfills.js:2818:24invokeTaskhttp://localhost:4200/polyfills.js:3862:9globalZoneAwareCallbackhttp://localhost:4200/polyfills.js:3888:17

I found a reference to using elasticsearch browser, but installing it dosn't seem to do anything. The info in the browser-bould page refrences angularjs, not angular 2, so I'm stuck.

Why this error is happening? How to solve it?

Answer 1

We found that the last solution in this thread worked for us:

Specifically:

 npm i -S process, then add this to polyfill.ts:
 import * as process from 'process';
 window['process'] = process;