Why do we use BrowserModule, FormsModule, CommonModule, HttpClientModule and RouterModule?

BrowserModule: The first thing that we notice is that our module is importing the BrowserModule as an explicit dependency. The BrowserModule is a built-in module that exports basic directives, pipes and services. Unlike previous versions of Angular, we have to explicitly import those dependencies to be able to use directives like *ngFor or *ngIf in our templates.

FormsModule: Angular 2 now provides an identical mechanism named also ngModel that allow us to build what is now called Template-Driven forms.

CommonModule: CommonModule provides (all the basics of Angular templating: bindings, *ngIf, *ngFor…), except in the first app module, because it’s already part of the BrowserModule.

HttpClientModule: The HttpClientModule is imported from @angular/common/http and it used to initiate HTTP request and responses in angular apps. The HttpClient is more modern and easy to use the alternative of HTTP.

import { HttpClientModule } from '@angular/common/http';

@NgModule({

 imports: [

   BrowserModule,

   HttpClientModule

 ],

 ...

 class MyService() {

    constructor(http: HttpClient) {...}

RouterModule: RouterModule is used for routing RouterLink, forRoot, and forChild.