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.
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:
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:
With Mosh’s way of instructing I usually do:
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?
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/
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?
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.
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
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<any[]>('http://jsonplaceholder.typicode.com/posts')
.subscribe((response)=>{
this.posts = response;
});
}
}
File: app.module.ts
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
...
interface BlogPost {
id: number;
title: string;
}
...
export class PostsComponent {
...
private url = 'http://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {
this.http
.get<any[]>(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!
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.
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.
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)
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. 
Very useful post. Thank you.
Today the url works properly with https only and createPost method seems to be fine this way:
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:
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: