Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular 4 Is Ready to Crack the Toughest Cookies

DZone's Guide to

Angular 4 Is Ready to Crack the Toughest Cookies

Is Angular 4 ready for prime time? Is it easy enough for developers to work with? In this post, we look at the reasons as to why the answer to both questions is yes.

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

For all those who might have continued to resist its charms, Angular 4 is worth your while! A wide range of companies have put their trust in it when it comes to their apps. More and more developers are also excited about working with this IDE. You might wonder why.

Simple! For a business or an organization, customer satisfaction is the priority, and Angular allows them to have an outstanding online experience due to the fact that it helps create Single Page Applications (SPAs) instead of just regular web pages. Meanwhile, for those on the coding side, this version of Angular features five major improvements: if…else syntax in component HTML templates, stand-alone animation module, TypeScript’s StrictNullChecks compliancy, Angular Universal adoption by the team to live in the core, and Performance boost with FESM (source).

First of all, the “If…else” conditionals are here to make a developer’s life easier when working with templates. What was impossible with Angular 2, can now be done — specifying an Else statement after an If. When you’ve already started a new Angular project, run the >ng serve command, and opened up localhost:4200 in the browser, you can follow these steps, as outlined by Gary Simon:

First, open up /src/app/app.component.ts:

export class AppComponent {

  title = 'app works!';

}

Next, open up the /src/app/app.component.html file in the same folder and write this code:

Operators can also be used by changing the *ngIf to:

And then to:

1-browser-app-works

“If…then” can also be used. For details, see this blog.  

Animation is part of Angular's evolution: these functions are no longer part of the core library — instead, they got their own. This implies a need to use npm to install the animations package, as well as import the library within the app.module.ts file. Yet, the benefits outweigh these extra few steps. Angular 4 allows for the creation and activation of world-class animations, which can then be placed on any HTML elements and occur based on a variety of factors, such as user events or Angular lifecycles (source). 

angular-app-module-ts-animation

To install Angular animations, do the following:

  1. To save the latest version of the Angular animations library, as well save it as a dependency in the package.json file, in the project folder of your Angular app, at the console, type:
> npm install @angular/animations@latest --save


  • In the /src/app/app.module.ts file, we add the import:
  • In the imports array of the @NgModule decorator, we add:
  • angular-app-module-ts-browser-animation-module

    To learn how to use get your component ready for animation, work with animation triggers, states and styles, transitions, how to attach an animation in the template, make it work in the component, add style during transitions, and add keyframe animations, check out Gary Simon’s blog.

    Null checking has gone to a different level too, ever since TypeScript (TS) 2.0 was released. Every type is now treated as a non-nullable — a great piece of news, since not paying attention to null can cause some trouble. It was possible to incorporate null checks manually, but TS compiler provides null checking for you. 

    For instance, one typical error is “Not assignable to parameter of type ‘never’”, which normally occurs because there is no more type widening. On the ariya.io website, we find a sample code that would cause such a problem. We are asked to imagine a lunch box with two compartments to be filled with the food of our choice and to include its name and calorie count.

    Which results in something like:

    The array lunchBox does not have any type information, so it is set to Never. As soon as you try to insert an item into the array, the type conflict occurs (Never vs Fruit).

    angular-strict-null-function-bad

    To solve this issue all you need to do is include the appropriate type information. Something to this effect:

    angular-strict-null-function-good

    To see some other possible errors and solutions, take a look at this blog.

    Angular 4 is also now in sync with Universal (the project that allows Angular to be run on a server). To access most of the Universal code, go to @angular/platform-server. More information on Universal use is available at GitHub — check out the renderModuleFactory method in @angular/platform-server, or also from Rob Wormald in his Demo Repository.

    Flattened ECMAScript Module (FESM) just got better too! In accordance with the changelog (as quoted on the onlinecode.org website), “This format ought to facilitate tree-shaking, facilitate cutting back the scale of your generated bundles, and speed up builds, transpilation, and loading within the browser in sure situations.” In other words, a huge difference in performance, talking about the build speed.

    Angular 4 took a giant leap into the future. To fully appreciate the differences between this version and the previous one, take a few moments to read this blog. But here you can see that five areas, in particular, got a boost to facilitate a developer’s life and allow the end user to enjoy a fantastic experience online.

    Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

    Topics:
    angular 4 ,web dev ,javascript

    Published at DZone with permission of Nataliya Muriy. See the original article here.

    Opinions expressed by DZone contributors are their own.

    THE DZONE NEWSLETTER

    Dev Resources & Solutions Straight to Your Inbox

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

    X

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}