What’s new in Angular 4?

Rss Bot · July 12, 2017

In March, the Angular team released version 4, and with it some exciting new features to explore. In this tutorial we’ll show you how to make an app using some of these new features, as well as demonstrating some of the powerful performance-enhancing, under- the-hood changes.

What's new?

The Angular team is calling it an ‘invisible makeover’, because most of the changes are in the background rather than with core coding functionality. An important change is the move to ahead-of-time compilation as standard, which has the potential to drastically improve performance when used correctly. TypeScript 2.1+ is also now supported, which gives us access to all the new features of ES2015.

That’s not to say there aren’t also any notable changes to the basics – for example, there's a useful new template-binding syntax that enables us to simplify our code by adding an else option to ngIf, and the ability to assign local variables within an ngFor.

Did I miss 3.0?

Angular 4 is the first major version release of the framework adopted of semantic versioning. So don’t worry, you didn’t miss 3.0 – there were two major updates, and both were rolled into version 4.0.

Note also that Angular 1.x is now known as AngularJS, and Angular 2+ is simply referred to as Angular. Be wary as some third-party tutorials and libraries may not have updated their use of these terms.

Get the tutorial files

In this tutorial, we'll be working with a Flower Shop app. To download the example app, go to FileSilo, select Free Stuff and Free Content next to the tutorial. Note: First time users will have to register to use FileSilo. Once you're logged in, you can download the example app here.

Let's get started!

01. Start with Node

Download and install Node.js by following the instructions in the wizard

Let's starting from scratch, and use the Angular CLI to build a Hello World app. If you want to update an existing app, skip to step 4. If you haven’t already, download Node, which comes pre-packaged with npm. If you already have Node, check it's at least Node 6.9.x and npm 3.x.x from the command line.

02. Set up a new project

Create a simple Hello World app in the Angular CLI

Now we have a package manager we can use it to install Angular and the Angular CLI. Amongst other things, the CLI enables you to easily generate new projects and components.

03. Check versioning

If you’ve not seen an Angular project before, take time to familiarise yourself with the file structure generated by the CLI. For our new project, our package.json should list version 4.0.0 Angular packages.

04. Upgrade to Angular 4

If you have an existing Angular app with 2.x versions listed, it’s really easy to update to version 4 in most cases. We just need to install and update the relevant packages from the command line. Mac:

Windows:

05. Download the tutorial app

From now on we’ll be working with an Angular 2 example app that you can download from FileSilo (for full notes on how to do this, see intro above). Note that this app has been created purely for illustrative purposes. Once you’ve downloaded theFlower Shop app into your root directory, install dependencies and launch in the browser.

06. Upgrade Flower Shop to 4.0

Our custom modal module needs renaming [click the icon to enlarge)

Within the flower-shop directory, upgrade to 4.0. We have some UNMET PEER DEPENDENCY errors after upgrading.

07. Fix peer dependencies

Peer dependencies are for managing projects that have packages relying on different versions of the same dependencies. You have to add these manually to your package.json file. The peer dependencies that we need for Flower Shop include older versions of @angular/{core,http}, rxjs and zone.js.

Review the errors in the terminal output and add each missing dependency to package.json.

08. Watch out for name changes

Our Flower Shop app makes use of an open-source custom component called ng2-modal. However, the author has since updated their naming convention to ngx-modal. We need to modify our dependency name and ng-module imports accordingly.

09. Check versions

Our custom modal component also needs updating to a more recent version, so be sure to update it with npm.

10. Check your work

Now we’ve patched up our dependencies, it’s a good idea to clear node_modules and build it again from our package.json. If all goes well you should have a clean build! If you don’t, something may still be missing in your dependency versions. Take another look.

Next page: Steps 11-20

11. View engine

Let’s see what new features we can use in 4.0. The new view engine compiles to a much smaller bundle, meaning extra performance benefits from using AoT compilation with the Angular compiler ngc.

This means that compilation happens at build time, once, rather than multiple times in the browser at runtime. Let’s give it a try with our app.

12. Create AoT config file

We need to create a new config file to tell our ngc compiler what’s what. Create a new file in the project root and name it tsconfig-aot.json. Enter the following configuration:

13. Initiate AoT compiler

We can now run our ngc compiler, and there’s an intentional bug in our code so we can see it working.

14. Fix the bug

In our items.component.ts file, we’ve forgotten to assert the type of our ‘item’ parameter. This doesn’t show up as an error in the editor but might cause problems at runtime. Ngc enables us to catch these issues early. Correct buyItem and cancelItem.

15. Email validator

Another handy new feature in 4.0 is the new email validator, which makes it much easier to validate an ngForm input type of email. Maybe our Flower Shop needs a newsletter. First, import the FormsModule to ngModule.

16. Form template

Next, add an ngForm field in the item.component.html template.

17. Handle inputs

Include handling for the email address input form field to item.component.ts.

18. Test in the browser

Our email validator easily recognises only valid email addresses

We should find that we can only use the Submit button when we’ve entered a string that meets the basic criteria for an email address. Well that was easy!

19. Update the structural directive syntax

The final thing we’re going to update is our structural directive syntax. ngFor and ngIf both have extended syntax options. ngIf now allows an else conditional. Let’s modify our ngIf in items.component.html to include an else. The element selected by the else condition must be within an ng-template.

20. Update the ngFor syntax

We have updated syntax in ngFor iterators to enable the as keyword to track an index. It’s trivial and doesn’t add much value to our Flower Shop app, but say we were receiving high volumes of item.json objects over HTTP and wanted to limit or count how many we are displaying on the page, this change makes that much easier.

21. New pipes

Titlecase pipe applied to flower description text forces the first letter of each word to be capitalised

Finally, we have a new pipe! Titlecase can be used to force capitalisation of the first letter of each word in a string. This can be useful for consuming data from name and address form fields, for example. Let’s test it out on the interpolated item descriptions.

There’s lots more  to explore with Angular 4, with the most significant improvements in larger apps, but hopefully this tutorial has made updating seem a little less daunting!

This article first appeared inside Web Designer issue 262 – buy it now.

Related articles:

View the full article

Sign In