Search code examples
angularquery-stringrequire

correct "2019" constructor declaration / instantiation syntax for external libraries

I am picking up and optimizing/linting someone else's code. the functionality is there and working, just not the performance...

Here is the constructor :

  constructor(
    private globalHelper: GlobalHelper,
    private authenticationService: AuthenticationService,
    private _sanitizer: DomSanitizer,
    private route: ActivatedRoute,
    private http: Http,
    private authService: AuthenticationService
  ) {
    this.showLoader = false;
    this.showNoChampionsAlert = false;
    this.disabledFinder = true;
    this.queryString = require('querystring');
    this.getDivisions();
  }

"require" gives me the following error before and after compile (albeit with compilation success and the function and API return both work) :

Cannot find name 'require'. Do you need to install type definitions for node? Try <code>npm i @types/node</code> and then add <code>node</code> to the types field in your tsconfig.

ERROR in src/pages/collab/champions/finder-page/champions-finder.ts(49,24): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try npm i @types/node and then add node to the types field in your tsconfig.

query-string is only used once :

this.http
        .get(
          App._URL +
          'ha/api/hi/at?' + this.queryString.stringify(data),
...

the stringification ouputs url-compliant syntax.

following up on this stackoverflow answer about how to pass data in Http calls, I assumed with angular 5+ (I'm using angular8) stringification was automatic.

but when I changed my code to this :

this.http
        .get(
          App._URL +
          'ha/api/hi/at?' + data,
...

in the browser console I saw the call had [Object][Object] instead of the desired string. so of course it fails.

I'm pretty sure this external library which is used for just this one thing can be removed from the project entirely.

If not, I'd like to know how to declare it "correctly"

Solution

  • If you want to use require in angular you can do it this way:

    import * as queryString from 'queryString';

    Now you can use it without this.
    Simply write queryString.stringify(data).