Angular 4 - the update: These features you need to know

 Finally, Angular 4 has appeared in the final version. we explain all the innovations, give tips on migration and dare a look at Angular 5.

Angular 4 - the update

Around six months after the release of Angular 2, the next big update is: Angular 4, or rather Angular v4. Because from now, the team has decided, it should be called "just angular" and the version number no longer be an explicit part of the name. Originally the "2" was used to differentiate between AngularJS and the newly developed Angular Framework, since many concepts were conceived or refined. For example, Angular can be used in Dart, TypeScript and ECMA At the time of the publication of Angular 2 it was already determined how future versions should be given: The " semantic versioning " should be done accordingly. This means that at a glance you can see how one version behaves to another in terms of compatibility and new features.The version numbers are thus set up according to the schema MAJOR.MINOR.PATCH. The position is changed according to the following criteria:

1. MAJOR is then increased if there is an incompatible change to the API. For Angular, this can be, for example, the use of a newer version of one of the libraries used, such as zone.js or reactJS, which has a modified API.
2. MINOR is then increased when an additional functionality is provided, but existing functions and the API are kept stable. This could be an additional pipe for Angular, for example, which is delivered as part of the framework.
3. PATCH is increased when a troubleshooting is performed that does not alter the API and is thus backward compatible.

 In addition, there is an optional -QUALIFIER, which specifies a version. For example, 4.0.0-rc.1 or 4.0.0-beta to mark a beta or release candidate. 

Jump: From 2 to 4 - Next 8?

Some will have wondered that the next version after Angular 2 will not become Angular 3 but "Angular" v4. The background is that a harmonization of the version numbers of all components of Angular was striven for. However, the Angular own router has already been developed in version 3 and must now be upgraded to version 4. For standardization, version 4 was therefore chosen for the entire Angular Framework. Only Angular CLI, the command line tool for project planning and abstraction of build and test execution is then available in version 1.0.0.

This is new in Angular 4

Reason for the new major version are both new features as well as the previous version incompatible changes. Let's take a look at the new features :

Router ParamMap

With the router it is possible, starting with version 4, to query the route and cross parameter assigned to a route as a so-called ParamMap .Previously, the route parameters were in a simple key-value object structure, so you could access them using the typical JavaScript syntax ( parameterObject ['parameter-name'] ). 

class MyComponent {
sessionId: Observable<string>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
this.sessionId = this.route
.queryParams
.map(params => params['session_id'] || 'None');
}
}

 Now the parameters are also available as a map, so you can execute the parameters as simple method calls (parameterMap.get ('parameter-name')).

11class MyComponent {
sessionId: Observable<string>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
this.sessionId = this.route
.queryParamMap
.map(paramMap => paramMap.get('session_id') || 'None');
}
}

The use as a map also brings advantages in terms of type security. The old key value structure had an unsafe type ( type Params = {[key: string]: any} ), whereby the parameter value could have all possible types. With the new map, however, the parameter value is either a string or an array-of-string, depending on the method used. The type definition for individual parameter values, ParamMap.get (): string, and the type definition for several values apply. ParamMap.getAll (): string [] . 

animations

To date, Angular has provided the functions necessary for animations as part of the @ angular / coremodule. Thus, these code parts became part of the application even if they were not needed because the application makes no use of animations. In order to avoid unnecessarily large bundles, this part was now separated into a separate package. (This is not just a new feature, but a change that requires adjustments to previous applications, if they use animations.)In the future the animations will be provided via the module BrowserAnimationsModule from @ angular / platform-browser / animations .

ngIf: Now with "else"

It is often the case that so-called "conditional rendering" is used in templates in order to display information as a function of a condition. For this, * ngIf is used. If the condition is not fulfilled, the element and all child elements are not inserted into the DOM tree. In many cases, the complementary case is also required, so far the condition had to be formulated inversely, and another * ngIf was used.The readability of the code and also the maintainability suffers as a result. Finally, adaptations must take several points into account.With Angular 4, an else is now available to meet this application. Contrary to what is expected, Angular uses a separately referenced template fragment which, in the alternative case, is substituted for the element which is distinguished by the * ngIf.For purposes of illustration, an example is given, in which, depending on whether a user is registered, his name or a "logon" link should be displayed. Only in the old syntax:

<p *ngIf="isAuthenticated">Eingeloggt als auth.username</p>
<p *ngIf="!isAuthenticated">Bitte anmelden: <button>Login</button></p>

  the new syntax 

<ng-template #loading>
<p>Lade Nutzerdaten...</p>
</ng-template>
<p *ngIf="auth | async; else loading; let user">
{{user.username }}
</p>

 In conjunction with the async pipe , * ngIf now also offers improved functionality for reactive programming. So far, there was already the possibility to "subscribe" (or "unsubscribe") to asynchronous objects like observables and the like from async-pipe. With the new * ngIf syntax it is now possible to hang a local template variable to the result of the if expression. In the example below, the observable, which is contained in the variable auth, is resolved by the async pipe. The result of this resolution can then be used with the help of the variable user within the template.

<ng-template #loading>
<p>Lade Nutzerdaten...</p>
</ng-template>
<p *ngIf="auth | async; else loading; let user">
{{user.username }}
</p>

It should also be pointed out that the async pipe is not a compulsory prerequisite for the use of the new syntax, but has been selected in this example for illustrative purposes only. It is also possible to use any other pipe or pipe.

Dynamic components with NgComponentOutlet

With the new * ngComponentOutlet directive, it is possible to generate dynamic components in declarative ways. To date, it has been relatively complex to create and display components dynamically at runtime, as it is not done with writing HTML code. Angular needs to know about the component and integrate it into the lifecycle as well as taking care of data collection and change detection. This is why the previous approach was to use ComponentFactory , which involves a lot of programming effort.The following code example shows how the conversion with the * ngComponentOutlet looks like:

@Component({
selector: ‘app-first-time-visitor’,
template: ‘<h1>Welcome to our Page!</h1>’,
})
export class FirstTimeVisitorComponent {}
@Component({
selector: ‘app-frequent-visitor’,
template: ‘<h1>Welcome Back!</h1>’,
})
export class FrequentVisitorComponent {}
@Component({
selector: ‘app-root',
template: `
<h1>Hello Angular v4!</h1>
<ng-container *ngComponentOutlet="welcome"></ng-container>
`,
})
export class App implements OnInit{
welcome = FirstTimeVisitorComponent;
 
ngOnInit() {
if(!this.user.isfirstVisit){
this.alert = FrequentVisitorComponent;
}
}
}

In this 

example, either the FirstTimeVisitorComponent or the FrequentVisitorComponent is used to greet the user , depending on whether the user first appears on the page or has been more often on the page . The OnInit lifecycle hook is used to check whether the user's visit is the first one. Based on this, a different component is then dynamically transferred to the template for display.

TypeScript 2.1 / 2.2

With the official support of the newer versions of TypeScript, the type security of angular applications and the speed are increased to the ngc compiler.

StrictNullChecks

Unfortunately, some of the improved Type Checks could not be included in Angular 4, because incompatibility was found in the RC phase. This feature is now planned for v4.1.

Angular Universal

Angular Universal offers the possibility to render Angular applications also outside of the webbrowser, for example directly on a web server. This makes search engine-friendly websites possible, since no JavaScript is required to display the content. Another use is to use WebWorker threads to render content outside of the GUI thread, which must then only be included in the DOM Tree for display.For Java developers, the tickets are likely to support the Spring Framework or Springboot to render via rhino or J2V8 on the server side:

• https://github.com/angular/universal/issues/631
• https://github.com/angular/universal/issues/280

Unfortunately, no productive results are available. With the aid of node-runtime, Angular Universal can already be used from different languages.

New Pipe: Title Case

With the new titlecase pipe, the first letters of a word are converted to uppercase letters, all other letters become lowercase letters.

Forms automatically receive 'novalidate'

Previously, forms had to be distinguished by 'novalidate' if the browser's validation specified by HTML5 was to be suppressed to allow full control of the Angular application.As a result, developers regularly awarded each form with "novalidate". In Angular 4, this attribute is set automatically.

Sourcemaps also for templates

When it comes to debugging and debugging, source maps are essential. This can be used to establish the relationship between source code and result in order to enclose the exact error location. The new template compiler now also creates source maps for the templates so that better context information is available both in the browser debugger and in crash reports and log messages.

Flat ES modules (Flat ESM / FESM)

Instead of many small files, which are part of a module, now also "flat" versions of the modules are delivered. In this case, flat means that one module is delivered per module, in which the module belongs to the module. These shallow modules should result in better performance both when compiling and running in the browser. In addition, this will improve the treeshaking and the build and ultimately the applications can be smaller.

New view engine for outstanding speed

Angular generates the view layer from templates and the @Component elements. There is the Just-In-Time Compiler (JIT), which is mainly used during development and is essentially an interpreter. Parallel to this, the Ahead of Compiler (AoT), which creates executable (JavaScript) code with embedded HTML fragments from the templates and components. This often called codegen generates a lot of code: Event handling, change detection, data binding and dealing with the dynamic behavior of the components are put into the result here.The applications thus generated have a very high speed, but the scope of the code is considerable. After that, the start speed of an application suffers, after all the downloaded code has to be downloaded.

The Angular team again shows a very open approach here and takes, for example, the Inferno.js framework as a reference for performance and design decisions other frameworks. The various requirements, objectives and approaches to the template layer of Angular are also discussed in the comprehensive design document for the View Engine.As a result, Angular 4 delivers significantly smaller templates, which reduces both the loading time and the overall speed by the reduced amount of code. On average, you can expect about 60% savings, which is a significant improvement for mobile applications.In addition, the resulting work for the garbage collector in the browser could be reduced, which is also demonstrated by an overall improved performance. The generated code is not only good to be compressed with classical methods like gzip, but can also be minimized with the Google Closure Compiler, which further reduces the scope.

Required adjustments for Angular 4

Let's take a look at what adjustments are necessary to existing Angular 4 projects. In order to make migrations as easy as possible for developers, an interactive guide is provided by the Angular team: https://angular-update-guide.firebaseapp.com/ . Currently, the project is still at a very early stage and gives inconsistent or outdated advice, so it is not advisable to use it at the present time.

Update of dependencies

The versions of the Angular modules can be updated via npm:npm install @ angular / {common, compiler, compiler-cli, core, forms, http, platform-browser, platform-browser-dynamic, platform-server, router, animations} Hive account@next -save

Changed lifecycle events

Classes are not allowed to implement lifecycle events via inheritance but must use interfaces:Foo extends OnInitbecomes:Foo implements OnInitThis change is likely to affect only a few developers and is also easy to implement.

Template tag renaming

So far, <template> has been used as tag or attribute for templates. This is now marked as deprecated . It is replaced by <ng-template>.

Access to renderer

So far, Renderer and RootRenderer could be used. This is no longer possible. Access is now made through RendererFactory2 .

Use of animations

So far animations have been part of Angular core. By separating into Angular 4, the imports must be adapted when animations are used:

import {Component, OnInit} from '@angular/core';
import {
animate,
state,
style,
transition,
trigger } from '@angular/animations'

While Component and OnInit are further developed from Angular Core, "animate", "state", "style", "transition" and "trigger" are now imported from Angular Animations.

News in Angular CLI

Anglar CLI is the command-line tool for creating, building and testing Angular projects. Together with Angular 4, Angular CLI was released in version 1.0.0 and is now the core component of the Angular project.A particularly noteworthy feature is the support of alternative package managers to npm: it also supports Facebook yarn and cnpm. The advantages of the Angular applications are: The use of yarn can be activated as follows:ng set -global packageManager = yarnAs a new addition, Angular CLI in version 1.0.0 now creates standard Angular 4 projects and provides better error messages with AoT compilation of templates.

View: Angular 5 and the future

The world is evolving and Angular keeps pace: new releases are planned for the future as well.At present, a module is being developed for ServiceWorker , in order to be able, for example, to map push notifications into Angular.At the moment, the timeline plans to publish a new major version of Angular every six months. This is Angular 5 for about October this year to the agenda, March 2018 follows Angular 6. In between it will, as also since publication of version 2.0, minor releases and if necessary, give bugfixes. In addition, the team has decided to make time-based releases:

• Each week a patch / bugfix release
• Every month a minor release
• Every six months a major release, whereby a simple migration from the previous version is given great value.

It is important to note that features marked as "deprecated" will be removed in the next release. As a developer, you have a window of six months to make a migration if you want to update directly to the next major version. This is also recommended, because a "migration jam" results in a short or long time, that one is hung on an old version and the effort increases significantly, if a migration with a jump over several versions pending.

Through community feedback, the Angular team is clear that the development speed of Angular is perceived as "very fast" especially in enterprise environments. In order to meet the special needs of large organizations, there is also a long-term support (LTS) version of Angular that will benefit from bug fixes over a longer period of time.

This may calm some project managers, it would be exciting how the migration from one LTS version to the next LTS version. Experience has shown that it is advantageous to keep up-to-date with current developments and to benefit from current developments. How long exactly the LTS period for Angular and AngularJS should be is currently under discussion

.Google uses an automatic code migration tool internally. In this case, too, it is necessary to make the tool available to the public or to provide a comparable tool for automated migration.

The developments reveal that Angular - thanks to the very open ear for the wishes of the community - creates as an adult and professional framework both for the use in small agile teams as well as in large organizations.