How to upgrade to the new Angular Command Line Interface (CLI) 1.3 release

The new Angular CLI release is out there, time to upgrade and use it.

 Angular CLI recently released its next major version, 1.3 (Hopper). There are some pretty great features in this release and I can’t wait to talk about a few of them here. 

Angular CLI 1.3

In this article, we are going to discuss how to check what version of the CLI you are running, how to upgrade and what new features 1.3 is giving us. 

Upgrading Angular CLI

The first thing we need to talk about is installing or upgrading the Angular CLI. For those of you who have never actually installed it yet please check out this article I wrote. If you are already running the Angular CLI you can check what version you are using by running the “ng -v” command. 

Angular CLI version check

As we can see it has been a minute since I ran an update so this is a perfect time to do so. 

Upgrading 1.0.0-beta.28 or earlier

If you’re using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-cli package. It should be done due to changing of package’s name and scope from angular-cli to @angular/cli

Update Angular CLI

In my case, I was running a newer version so we can just run a simple command to update. 

Now if I run “ng -v” you can see that I have updated to the latest stable version which is 1.3.2

Angular CLI

What’s New in Angular CLI 1.3

Angular CLI now officially supports ES2017 and TypeScript 2.4 paving the way for Angular 5 which should be released very soon!

Universal Support (Server Side Rendering)

Angular Universal Support allows you to run your Angular code on the server side as opposed to in the browser.

Angular CLI supports a generation of a Universal build for your application. This is a CommonJS-formatted bundle which can berequire() into a Node application (for example, an Express server) and used with @angular/platform-server‘s APIs to pre-render your application.

Follow this tutorial to check it out.

Build Optimizer

Angular CLI 1.3 upgrades us to Webpack 3 which brings us some new features a bug fixes. We also get a new optimizer that is meant to slim down our applications in production.

Named Chunks

As long as we are talking about builds we should mention a new flag –named-chunks which will generate named chunks. Prior to Angular CLI 1.3 all of the lazily loaded chunks were named:

This setting can be enabled disabled with the namedChunks option in angular-cli.json and defaults to true. With that option in place, we will get some nicely named chunks. 

Proxy Configuration

It’s been possible to define a proxy configuration for awhile now. This allows to match a pattern and forward all of those requests to our server side application. I do this a lot in my Spring Boot applications with something like this. 

The problem was you had to modify the ng serve command so that it took in your proxy config 

Now we can simply configure a proxyConfig in our angular-cli.json and the serve command will pick it up automatically. 

Bug Fixes

As always a considerable amount of bug fixes!

Angular CLI 1.3 Release Notes

This is release 1.3.0 of the Angular CLI. As a minor release, it adds a lot of new features (as well as a considerable amount of bug fixes) from the 1.2 releases.

Read the full release notes here.

Conclusion

The Angular team is constantly improving the CLI and it’s exciting to see some of the new features and bug fixes. 

Hi, I’m Dan Vega. I am a Software Engineer living just outside of one of my favorite places in the world, Cleveland Ohio. I am a self-taught programmer who firmly believes that you can accomplish anything in this life if you put your mind to it, roll up your sleeves and are willing to put in the work.

I have been writing software for over 17+ years now and I use my knowledge, passion, and influence to help other developers achieve their goals. I teach online and currently, have over 22,000 students.

When I am not writing software I have a number of things that really keep me busy. I love to read books, listen to podcasts and watch online courses. I have a real thirst for knowledge and it consumes me every single day of the week. I also love to run & lift heavy weights which keep me balanced throughout the week.

Please note: I reserve the right to delete comments that are offensive or off-topic.