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

What Is New and How to Set Up Our First Angular 5 Application

DZone's Guide to

What Is New and How to Set Up Our First Angular 5 Application

In this post, we examine the best new features of Angular 5, and then walk through how to get an Angular 5 app up-and-running.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Introduction

We all know that the Angular version 5 was released a few weeks back, aren’t you eager to know what's new in Angular 5? What helps make development easier? Well, here in this post I am going to discuss a few updates in Angular 5. By saying that, I will not be discussing all the items which have been released with this version. Here, we will also be checking how to create our first Angular 5 application. So at the end of this article, you will have your own sample application with you. Cheers for that. I hope you will like this article.

Source Code

You can always clone or download the source code here.

Background

As I mentioned earlier, this post is going to give you an introduction to the changes or updates in Angular 5. The application we are going to create is a basic Angular application with the help Angular CLI and NPM (Node Package Manager). So if you have not installed Node.js on your machine, please go ahead and install it from here. Now let’s see the key updates in Angular 5.

What Is New in Angular 5?

Though there are quite a few updates, I would say more concentration was given to the area of performance and efficiency. Below is the list of key area updates.

AOT Compiler

AOT stands for Ahead of Time compiler, what it does, as the name implies, is to convert all of our TypeScript codes to native JavaScript code to make sure that it will be supported in all browsers. The same was being done by Just In Compiler in the previous version, so what's the difference? AOT converts the code before it runs in the browser, whereas JIT converts it at runtime. Hence the page renders faster.

Optimizations

As I mentioned earlier, the development team was concentrating more on the performance aspects of Angular 5. Two of such improvements are:

  1. Boosted speed.
  2. Smaller bundles.

Package Updates

There are some updates in a few packages, and some of them are:

  1. Now Angular CLI 1.5 has Angular 5.
  2. RXJS version has been upgraded to 5.5.
  3. TypeScript has been updated to 2.4.

New Httpclient

There are some changes in some modules as well. The new HttpClient module is faster and lighter than the previous version. Hence the old HTTP module has been deprecated, however, you can still use the same in your applications, it is just that this old module will vanish in any future updates. The new module can be imported as below.

Import {HttpClientModule} from ‘@angular/common/http’

Other Updates

There are some other updates related to many modules and categories. A few of them are:

  1. Some changes in form validation, specifically in blur and on submit.
  2. The pipes are more standardized and internationalized now.
  3. Old pipes are deprecated now.
  4. A new module, ServerTransferStateModule, was introduced.

Sorry that I am not including any code snippets to highlight the actual changes, I will be writing an article very soon with full code changes.

Creating Your First Angular 5 Application

To create an Angular application easily, the first thing you may need to do is install Angular CLI. I hope you had already done it. Let’s just jump into the process now.

Open your Node Package Manager Console and create a directory where we are going to download all the Angular files.

mkdir Angular5

Now we can move our cursor to that folder.

cd Angular5

Now we can check whether Node and NPM are already installed or not.

D:\SVenu\FullStackDevelopment\Angular\Angular5>node -v

If it is installed you will get the version, for me it was v7.9.0

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm -v

My NPM version is 4.2.0

By any chance, if you need to update your NPM version, you can always do that with the help of the following command.

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm i -g npm

After I update my NPM version, the command npm -v was showing as 5.5.1. So now we are good to go. Our next step is to install Angular CLI, let’s do it.

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm install @angular/cli -g

If you want to check the version of your Angular CLI, you can use the below command.

D:\SVenu\FullStackDevelopment\Angular\Angular5>ng -v

The result may look like what I've given below.

Angular CLI: 1.5.0
Node: 7.9.0
OS: win32 ia32
Angular:

Now it is time to create our Angular Project, please use the following command to do so.

D:\SVenu\FullStackDevelopment\Angular\Angular5>ng new MyAngular5App

Here MyAngular5App is the project name. Once you run the command, it will do 3 tasks.

  1. Creating the components which are needed.
  2. Installing packages for tooling via npm.
  3. Initializing git.

Now if you go to your project directory, you can see all the files have been included there already. You can go ahead and open the files in any source code editors.

As the last step, we need to run our application.

D:\SVenu\FullStackDevelopment\Angular\Angular5>cd MyAngular5App

D:\SVenu\FullStackDevelopment\Angular\Angular5\MyAngular5App>ng serve

The above command will build your application and serve it to port 4200 by default. You may see the following output in the command window.

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-11-15T07:45:17.925Z
Hash: dd334581365d3dd74dfd
Time: 21845ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 24.3 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 34.9 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 8.03 MB [initial] [rendered]

webpack: Compiled successfully.

Let’s run our application by running http://localhost:4200 now. I am sure you will get an Angular application as follows.

Angular_5

Conclusion

Thanks a lot for reading. Did I miss anything that you think is needed? Did you find this post useful? I hope you liked this article. Please share your valuable suggestions and feedback.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
angular 5 ,angular ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}