Cannot find module '@angular/http'

Question

Today, we're going to discuss an error that's very common in Angular: Cannot find module '@angular/http'. This happens when the user is trying to import http service from @angular/http module. In the following section, we'll discuss what's "Cannot find module '@angular/http'", why it occurs and how to solve it using a very simple fix.

 Table of Contents:

1. What is "Cannot find module '@angular/http'"
2. Causes
3. Solution
4. The Conclusion
5. The Reference

What is "Cannot find module '@angular/http'" #

This problem happens when we're trying to import some services, such as http service from @angular/http module. This is because Angular has deprecated and removed the module, and thus prompting this error whenever a user's trying to access it. Let's look at the example:

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

Here, we're trying to import a http service from @angular/http module in a .service.ts. This is the result:

Cannot find module '@angular/http' or its corresponding type declarations.ts(2307)
  

So, why does this happen? Let's go to the next section.

Causes #

The reason behind this problem is because whenever a new version of Angular is released, it'll sometimes deprecate and eventually remove some existing APIs or replace them with the other to maintain stability and the best pratices in using the dependencies. In this case, both the http service and @angular/http module have been deprecated, removed, and replaced by alternative service and module to maintain the performance of Angular. Hence, we'll need to use that alternative service and module to ensure our Angular application working smoothly. So how? Let's see the next section.

Note http is deprecated and removed in Angular 5 while @angular/http is removed in Angular 8.

Solution #

Well, this problem can be fixed very easily, just by importing HttpClient service from @angular/commom/http. Let's see the step:

First, you need to import HttpClientModule from @angular/common/http in the app.module.ts

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

Next, you must put the HttpClientModule in the imports: [] in the @NgModule directive in app.module.ts.

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  

Finally, we import HttpClient from @angular/common/http in the file we want to use:

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

That's all. Simple right? The problem is now resolved and you can continue communicating your APIs using HttpClient!

Tip Important removal and replacements in relations: Http -> HttpClient, HttpModule -> HttpClientModule, URLSearchParams -> HttpParams

Note You should always import HttpClientModule before using HttpClient service.

The Conclusion #

In this study blog, we've learned what's Cannot find module '@angular/http' in Angular, the reason behind it and how it's resolved. Bear in mind, you should always check the deprecation and removal of APIs in different version of Angular to avoid annoying yourself with the similar problems like this. Hope you guys enjoy this blog and have a nice day. :)

The Reference #

You may go through this reference for more information:

1. Angular Deprecated APIs: https://angular.io/guide/deprecations#deprecated-apis-and-features
2. Communicating with backend services using HTTP: https://angular.io/guide/http
3. Using Services in Angular: https://angular.io/guide/dependency-injection-overview