Angular 5
Angular team has just released the latest version of the Angular v5 termed as “Pentaganol Donut”. This release contains new features, bugfixes, and is making Angular smaller, faster, and easier to use.
Here’s the list of some of the biggest changes in v5.
#Build Optimizer
A tool included with the CLI for making the project bundles smaller using the semantic understanding your Angular application. All of the production builds created with the help of CLI will now apply the build optimizer tool by default.
Build optimizer serves two main jobs:
- Mark the parts of your application as pure, removing additional parts of your application that aren’t needed.
- Remove Angular decorators from the application’s runtime code. The decorators are used by the compiler and aren’t needed at the runtime.
These two main jobs help in decreasing the size of our Javascript bundles and thus increase the boot speed of the applications.
#Compiler Improvements
The Angular compiler has been improved to support the incremental compilations. The incremental compilations help in faster rebuilds, especially in the case of production builds and builds with AOT.
#Internationalized Number, Date, and Currency Pipes
The Angular team has built new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills.
Angular have relied on the browser to provide the number, date, and currency formatting using browser i18n APIs. This resulted in the need for a polyfill for most developers, meant that users were seeing inconsistent results across browsers.
In 5.0.0 the team has updated the pipes to use their own implementation, relying on the CLDR to provide extensive locale support and configurations for any locales you want to support. Please have a look at the document comparing the pipe behavior between v4 and v5.
#ReflectiveInjector replaced with StaticInjector
In order to remove even more polyfills, the Angular team has replaced the ReflectiveInjector with the StaticInjector. This injector no longer requires the Reflect polyfill, reducing application size for most developers.
Before
ReflectiveInjector.resolveAndCreate(providers);
After
Injector.create(providers);
#New Router Lifecycle Events
New lifecycle events have been added to the router, allowing developers to track the cycle of the router from the start of running guards through to completion of activation. These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure the performance of guards and/or resolvers.
The new events (in sequence) are:
GuardsCheckStart
ChildActivationStart
ActivationStart
GuardsCheckEnd
ResolveStart
ResolveEnd
ActivationEnd
ChildActivationEnd.
#RxJS 5.5
The use of RxJS has been updated to 5.5.2 or later. With the latest release of RxJS it fully empowers the developers to use a new way of importing called “lettable operators“. This avoids the side effects of the previous import mechanism.
#Angular/CLI v1.5
Starting with the release of CLI v1.5, Angular 5 support is added by default. This minor release also has the build optimizer turned on by default to benefit the developers for small bundles.
#Angular Forms
Forms play a very important part of many applications. The developers can now run the validation and value updates on Angular Forms either on blur or on submit instead of on every input event.
#HttpClient
HttpClient was shipped with Angular 4.3 in @angular/common as an easier, smaller, and powerful way to make web requests in Angular. Since its inception, the HttpClient has gotten some great praise from the developers. So, the Angular team has now started recommending HttpClient for all applications and deprecating the previous @angular/http library.
To update to HttpClient, you’ll need to replace HttpModule with HttpClientModule from @angular/common/http in each of your modules, inject the HttpClient service, and remove any map(res => res.json()) calls, which are no longer needed.
For a full list of the changes please see the changelog.