Why an entry about Angular @jakipatryk?

After I read an entry on the official Angular blog about a new major release of their framework, I thought - cool! Let's see how many posts about that have been already published on Steem!

I opened my Chrome and navigated to tag #angular, where, as it turned out, were no posts about the new Angular version. To be more precise, there were no posts about Angular 5.0 and there were only 3 posts on the tag! When I looked at them closer, I realized it's even worse - only two of them were Angular-related, the last one was an entry made by so-called flat Earth researcher titled "Hidden milk carton suggests the Earth is flat?" :D

I have decided that I'm going to start writing about JavaScript and Angular and try to widespread this kind of content on Steem. I'm not an expert, but you don't have to be a professional to write about your hobby, just remember to add references to sources you used. I'm also not a scientist, but it doesn't mean that I mustn't write about science as I'm a hobbyist (btw. if you like science check #steemSTEM and join us on chat).

I don't abandon the science content of course. If you like my IQ overload series, don't worry ;)

^{source: angular.io}

Angular 5.0 - what has been changed?

If you remember the release of Angular 2.0 you might think - Angular 5.0 is also a major release so it probably is also something big and I will have to learn everything once again. It turns out that it is not true. Furthermore, in case you are already familiar with Angular 4.3+ and its HttpClient, you won't have much more to learn. It is good to hear that, right?

Despite the fact that you don't have to master your knowledge again, Angular 5.0 introduces a lot of changes, most of them working under the hood to make this framework smaller and faster. Here are some of them:

Build optimizer

To notice this change you have to use Ng CLI. Build optimizer reduces the size of JavaScript bundles and increases the speed of your app. It is possible to achieve this, because build optimizer removes unnecessary parts of your app. It also pulls put decorators from your app's runtime code (decorators are used only by the compiler so it's useless in runtime code).

CLI 1.5

It is not hard to predict that new version o Ng CLI will generate Angular 5.0 projects by default. It also turns on build optimizer by default.

HttpClient library no longer in beta

As I mentioned before, HttpClient has been available since Angular 4.3, but Angular team tells us that:

[...] we’re now recommending HttpClient for all applications and deprecating the previous Http library
_{source: Angular blog}

How does call to API look like now?

1. First, you have to import HttpClientModule into your module:
   
...
import {HttpClientModule} from '@angular/common/http';

@NgModule({
imports: [
...
HttpClientModule,
...
],
})

export class MyModule{}

2. Now you can inject HttpClient into services or components to make API calls:
   
@Component(...)
export class MyComponent implements OnInit {

constructor(private http: HttpClient) {}

ngOnInit(): void {
this.http.get('/yourapi/anything').subscribe(data => {
// do anything you want with data you get from API
});
}
}


Ahead-of-Time (AOT) compiler

The Angular compiler converts HTML and TypeScript code from your app into JavaScript bundle. It offers two modes, JIT (Just-in-Time, this one compiles the code in the browser at runtime) and AOT (Ahead-of-Time, this one compiles the code at build time). Compiling the code at runtime in the browser is not the most officiant way to make your app fast in the production, so default mode in production builds is AOT. What new version of Angular changes is that now you can use AOT flag while running ng serve (ng serve --aot). Ahead-of-Time compilation time has been improved a lot in this major release.

More router lifecycle events

The Angular team tries to make our life easier by adding 8 more router lifecycle events, so you can track what's going on in more points of the cycle of the router than before.

Summary

Angular 5.0 changes a lot of things behind the scenes, but developers don't have to change much in their projects. The most important changes for me are in: library to handle Http requests, build optimizer, AOT compiler and router lifecycle events.

If you want to learn more, check the references. Also, in case JavaScript or Angular are the tools you work with, feel free to follow me for more incoming frontend content ;)

References:

• Angular 5.0
• AOT compiler
• HttpClient