CODEWITHSUNDEEP
angulartypescripthttpclientangular-httpclient
OpenStandards.net
OpenStandards.net

Reputation: 66

How to use or replace Angular's HttpClient without injection

I built a UI in Angular 8 that has a lot of complex interactions with a third-party API implemented in services using Angular's HttpClient.

Now I am trying to move the services code using the third-party API to an npm module so it can be shared by a Node/Typescript back-end. This back-end has no need for Angular besides this HttpClient dependency. But, I need to keep this shared API library back-ward compatible for the Angular UI.

I have two choices, and am asking for help and advice on either:

  1. Keep using Angular's HttpClient, but find a way to make it work w/o injection. I know you can bootstrap it to do the injection, but then I have no idea how to access those service class instances from outside it. The benefit to this option is no impact to the Angular UI project consuming the API services.

  2. Use another http client that supports Typescript. Note the biggest caveat here besides the obvious rewrite of the API services, is if it does not support RXJS Observerables, then it can impact a lot of the current application code consuming the API in the current Angular UI. That said, any recommendations on a good substitute?

I like the features of 'request', and there are types for it, but I can't find any documentation on how to use the types. It runs just fine without the Types inside Typescript classes, but am concerned that doing so will require the most rewrite of the Angular UI usages expecting Observables and the behaviors of HttpClient, such as error handling.

UPDATE: I'll save everyone time and sum up what I decided to do...

Angular's HttpClient can only run in the browser, not on Node, because it uses XMLHttpRequest. I'm trying 'axios', which can run in both Node and the browser. But, because I have so much business logic dependent on Angular Http client interface and behavior, and am afraid I might take a step back if axios introduces new issues, I decided to generalize it with an interface so the browser UI code can choose which client it wants to use, as well as open the door to adding other http clients down the road such as superagent.

While axios returns Promises, and HttpClient returns observables (a feature I wanted to keep for things like .map), I discovered you can easily convert promises to observables with:

import { Observable, from } from 'rxjs'; const observable = from(promise);

Upvotes: 3

Views: 1076

Answers (1)

olfek
olfek

Reputation: 3520

So I tried to use Angular HttpClient outside an Angular project.

I got this error:

Uncaught Error: The injectable 'c' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.

Using the advice:

... or manually provide the compiler with import "@angular/compiler"; ...

Did not work for me initially because I put the import statement at the end of my list of imports.

Putting the compiler import statement first BEFORE any other imports worked for me.

Upvotes: 0

Related Questions