# Struggling with HTTP Module in Angular
**URL:** https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538
**Category:** Angular
**Created:** [December 29, 2020, 9:18pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538 "2020-12-29T21:18:41Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@therist](https://forum.codewithmosh.com/u/therist)
#### Post date: [December 29, 2020, 9:18pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/1 "2020-12-29T21:18:41Z")
I know the course is older, intended for Angular 4, and I took it as challenge to fix errors stemming from upgrades, but I came to the section consuming HTTP services and I am really struggling now.
I’ll eventually figure this out, but I’m losing a lot of time here.
@Mosh this section needs a thorough update.
---
### Author:  [@ekinated](https://forum.codewithmosh.com/u/ekinated)
#### Post date: [December 30, 2020, 5:33pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/2 "2020-12-30T17:33:54Z")
I understand what you’re saying. There are a lot of great courses on this site, but because of how fast things change (especially in front-end Javascript frameworks), stuff can quickly become outdated.
Mosh has a tough choice though, he could either spend time re-doing this older courses or he could make new courses.
We need to find a way to clone Mosh!
I remember running into similar problems with courses/blogs written before Angular 4.3 replaced HttpModule with HttpClientModule (and some other breaking changes to RxJs). I was really frustrated and angry at the time, and I actually switched over to React which seems to have a much more stable API. Angular 6/8/10 (whatever it is now), is a bit more stable, but I felt really burned by Google/Angular and looking back am glad I jumped ship to React. Angular (in my opinion) is dead or dying. It’s not a bad framework, I just think for many reasons, people would rather use React/Vue/Svelte or something else.
As for your problem from converting the code to use HttpClientModule instead of HttpModule, I would try to follow some of the guides from that time, when everyone was suffering through those same problems:
> **[Migrating from Angular HttpModule to new Angular 4.3 HttpClientModule](https://devops.datenkollektiv.de/migrating-from-angular-httpmodule-to-new-angular-43-httpclientmodule.html)**
>
> This write-up is an experience report of our Migration to the new Angular 4.3 HttpClientModule
> **[Angular - How to use HttpClientModule?](https://blog.ninja-squad.com/2017/07/17/http-client-module/)**
>
> Angular 4.3 introduced the new HttpClientModule. How do we migrate our applications to use it?
> **[Updating to Angular's HttpClient: Simpler HTTP Calls](https://www.telerik.com/blogs/updating-to-angular-httpclient-simpler-http-calls)**
>
> HttpClient introduces a simpler way to make HTTP calls and a whole bunch of new features. In this post we'll dig into the benefits and how you can upgrade.
> **[Angular HTTP Client - QuickStart Guide](https://blog.angular-university.io/angular-http/)**
>
> Complete Guide on Angular HTTP: Learn how to do common HTTP operations: GET, PUT, PATCH, DELETE, POST, Error Handling, Interceptors, etc.
---
### Author:  [@therist](https://forum.codewithmosh.com/u/therist)
#### Post date: [December 30, 2020, 7:40pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/3 "2020-12-30T19:40:07Z")
Thanks for the offered help.
I am aware about the state of Angular vs the other frameworks, and if it were my choice I wouldn’t choose it.
Client wants it, so here we are 🙂
Otherwise I finished that section with Http, and I figured it out. It was just more time spent on the section which is the issue.
There are other courses out there with newer Angular frameworks, but I eventually came back to Mosh, because he doesn’t only explain code and mechanisms, but also gives us:
1. Best practices
2. Clean code
3. Opinions on which way to go when there are multiple ways
4. Nice exercises ( and I wish there were x10 exercises )
With Mosh’s way of instructing I usually do:
1. Go through the course
2. Work on couple of projects and whenever something is not clear I read documentation and again watch the specific video about it
3. After 2-3 projects done slower in this manner (still observing for best practices) I then prefer to re-watch parts of the course
This way I quickly get into mid-level developer in that particular area. I’ve done this with .NET and I am going through the same steps with Angular / Nodejs now.
If successful with my career @Mosh can count on a lifetime subscriber.
P.S. I’m not sure of how this site is going, but if it’s going well, maybe he can hire extra people to help him update the courses?
---
### Author:  [@ekinated](https://forum.codewithmosh.com/u/ekinated)
#### Post date: [December 30, 2020, 9:12pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/4 "2020-12-30T21:12:09Z")
I agree with everything you’ve said.
If you’re interested in .NET and Angular together… the course _“Build a Real-world App with ASP .NET Core 1.0+ and Angular 2+”_ is very good and I think you’ll like it for the same reasons you stated that you like Mosh as a teacher. For the most part, the .NET Core stuff will need minimal updates to work under .NET Core 3 or 5 (current version). The Angular was version 2, the last time I looked at the course, so you’ll probably run into similar problems with HttpClientModule replacing HttpModule.
In my opinion, it’s hard to keep old courses up to date, because unlike a book or a blog post, you can’t just have someone different come along and do a voice-over or re-record a video. In order to update something like the Angular 4 course, Mosh would potentially have to re-record entire Sections (to migrate from HttpModule to HttpClientModule), and might want to end up re-recording the entire Course to keep everything consistent.
I’m pretty sure that Mosh hires people to write content for his blog over at: [https://programmingwithmosh.com/](https://programmingwithmosh.com/)
Right now I think every course on this site is done by Mosh (hence “Code with Mosh”) and I’m not sure if that’s going to change anytime soon? I don’t think Mosh posts here a lot on this forum, but I could be wrong about that also?
---
### Author:  [@westley](https://forum.codewithmosh.com/u/westley)
#### Post date: [January 25, 2021, 4:44pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/5 "2021-01-25T16:44:31Z")
The courses are not outdated. Modules can be moved around in every major update, just like other JS libraries, there is no way to keep it up to day. As long as you are importing it the correct way, that’d be fine. With that being said, what you learn here is logics not syntax. You can check the updated syntax on [Angular.io](http://Angular.io).
---
### Author:  [@ChrisUribe](https://forum.codewithmosh.com/u/ChrisUribe)
#### Post date: [February 7, 2021, 7:54am UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/6 "2021-02-07T07:54:53Z")
For those who would like to see an example of the syntax used with the new HttpClientModule as of Angular Version 11, here’s my solution.
**Course:** Angular 4: Beginner to Pro
**Section:** Consuming HTTP Services
**Video:** 3- Getting Data
**File:** posts.component.ts
```javascript
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent {
posts: any[] = [];
constructor(private http: HttpClient) {
this.http
.get('http://jsonplaceholder.typicode.com/posts')
.subscribe((response)=>{
this.posts = response;
});
}
}
```
**File:** app.module.ts
```javascript
import {HttpClientModule} from '@angular/common/http';
...
@NgModule({
...
imports: [
HttpClientModule,
...
```
The rest of the code that Mosh used in the video was the same.
Thanks for the help! @westley @therist @ekinated
**Course:** Angular 4: Beginner to Pro
**Section:** Consuming HTTP Services
**Video:** 4- Creating Data
```javascript
...
interface BlogPost {
id: number;
title: string;
}
...
export class PostsComponent {
...
private url = 'http://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {
this.http
.get(this.url)
.subscribe((response)=>{ this.posts = response;})
}
...
}
createPost(input: HTMLInputElement){
let post:any = {title: input.value};
input.value = "";
this.http
.post(this.url,post)
.subscribe(response => {
post['id'] = (response as BlogPost).id ;
this.posts.splice(0,0,response);
})
}
```
I wish you all the best of luck! 🙂
---
### Author:  [@mfarooq100](https://forum.codewithmosh.com/u/mfarooq100)
#### Post date: [March 20, 2021, 3:59am UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/7 "2021-03-20T03:59:39Z")
Thanks for your post. In consuming HTTP service course 13 Throwing Application specific Errors is broken in Angular 11. The catch operator is not available on Observable. Do you know any alternate method to implement the same mechanism?
Thanks.
---
### Author:  [@ChrisUribe](https://forum.codewithmosh.com/u/ChrisUribe)
#### Post date: [March 26, 2021, 7:00am UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/8 "2021-03-26T07:00:01Z")
I ended up just using all of the versions Mosh uses in his videos. That way I could focus on learning Angular first. Then later, I can spend time porting the code as an exercise.
---
### Author:  [@tomersha717](https://forum.codewithmosh.com/u/tomersha717)
#### Post date: [April 1, 2021, 11:43pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/9 "2021-04-01T23:43:05Z")
Fill the same way, I managed with the section about the posts api,
but now in the section on authentication and authorization can’t code along with mosh
because the starter project file attached to this section is filled with errors (http mismatch)
---
### Author:  [@Daniel\_Soeller](https://forum.codewithmosh.com/u/Daniel_Soeller)
#### Post date: [August 12, 2021, 12:29pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/10 "2021-08-12T12:29:46Z")
Hi,
i also just just got confrontet with this Problem.
Since this is my first Framework, and first real coding jib. I am pretty sure i will struggel my fair bit, to adopt. Porperly its no Magic, but i an Update would be real nice. 🙂
---
### Author:  [@pesz](https://forum.codewithmosh.com/u/pesz)
#### Post date: [November 7, 2023, 7:58pm UTC](https://forum.codewithmosh.com/t/struggling-with-http-module-in-angular/1538/11 "2023-11-07T19:58:06Z")
Very useful post. Thank you.
Today the url works properly with https only and createPost method seems to be fine this way:
```auto
createPost(input: HTMLInputElement) {
input.value = "";
this.http.post(this.url, post)
.subscribe(response => {
post['id'] = response?.['id'];
this.posts.splice(0, 0, post);
});
}
```
After error handling:
```auto
createPost(input: HTMLInputElement) {
let post: any = { title: input.value };
input.value = '';
this.service.createPost(post)
.subscribe({
next: (response) => {
post['id'] = response?.['id'];
this.posts.splice(0, 0, post);
},
error: (error: Response) => {
if (error.status === 400) {
//this.form.setErrors(error);
}
else {
alert('An unexpected error occured.');
console.log(error);
}
}
});
}
```
Actually this post is pretty useful about the error handling section:
> [@Throwing Application-specific Errors .catch](https://forum.codewithmosh.com/t/throwing-application-specific-errors-catch/505/7):
>
> throwError method signature taking an error value is being removed in version 8. I’m currently on rxjs version 7.5.7. Angular 15. Also be sure you import your custom NotFoundError class, rather than from rxjs (same thing in the component), which auto import will do. Below is the implementation I used: import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { AppError } from '../common/app-error'; import { NotFoundError } from …