Adding Http-Clinet-Module to Angular Standalone App Part-4

Generally we register HttpClientModule in app.module.ts in angular apss. But how are we going to register HttpClientModule in standalone apps🤔.

From my previous articles you could see how we bootstrapped angular app and registered RouterModule through main.ts file.

In the same way how we registered RouterModule we need to register HttpClientModule as shown below

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient() // registering here
]
}).catch((err) => console.error(err));

we are done with registering HttpClientModule in Standalone app.

Now lets implement http call in this application.(there is no change i how we do API calls in standlone app when compared to App with modules)

to implement API call lets create a service by using following cmd
ng g s app.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppService {

  constructor(private http: HttpClient) {
    
  }

  getData() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }

}

we are injecting HttpClient into our service and making API call with get method as shown above.

Conclusion: In this article we registered HttpCliendModule in standalone apps and triggered API call.
In my next Article I will explain about how to register Ngrx store and effects in standalone components.