The Past, Present, and Future of the Angular CLI

Go to the profile of Stephen Fluin
Stephen Fluin

The Angular CLI is a command-line interface for building Angular applications, and over the last year it has become one of the most essential tools in an Angular developer’s toolbox.

The CLI is responsible for automating away many of the challenges and headaches that come with being a developer in 2017. By starting with a configuration that works out of the box, baking in best practices that have been discovered by the community over time, and by helping you build more maintainable code, the CLI exposes some of the most powerful capabilities of Angular in a way that is easier to get started, and easier to get moving quickly when compared to rolling everything together yourself.

If you aren’t taking advantage of the CLI today, it’s easy to get started. Assuming you have node and npm installed, you can run these four commands to get up and running with Angular and the CLI quickly.

npm install —g @angular/cli
ng new my-angular-project
cd my-angular-project
ng serve

Moving Quickly

The Angular CLI has made a lot of progress over the last few months, you can view the comprehensive notes about this progress on the releases page, but it can be helpful to look back on what’s happened in the last 4 months.

1.2 — June 2017

--minimal flag

The minimal flag allows developers to generate a smaller, simpler default project. Projects generated with this flag are a little different than the default set:

  • Inline Styles — Styles are stored directly in component files
  • Inline Templates — Templates are stored directly in component files
  • No Tests — There are no unit or end to end tests generated by the project

Named bundles

When you use Lazy Loading with Angular, we will generate a set of files that will be loaded by the Angular Router only when needed for a given route requested by the user.

When doing production builds, these end up being named numerically and sequentially from the build process.

0.46af283b5453c1d30d30.chunk.js
1.2b2a029972b8935a384a.chunk.js

Now with named bundles, we’ll use the name of the module as a hint as part of the build process to help with debugging for non-production builds.

admin.module.chunk.js
home.module.chunk.js

License Deduplication and Isolation

Angular and many 3rd party projects often have hundreds of individual files with licenses. Historically our CLI has helped developers stay compliant by concatenating these licenses as part of the bundling process.

Now, to keep bundles as small as possible, we extract these licenses into a separate 3rdpartylicenses.txt file and remove any duplicate licenses.

1.3 — August 2017

Bundle size improvements

With each release, we work hard to try to improve the quality of the code that the CLI generates with production builds. With this release we’re leveraging the latest capabilities from Webpack 3, including scope hoisting.

We’ve also included a beta of a new tool we are working on to help with removing code that you aren’t reliant on called our build optimizer. You can give this flag a try with:

ng build --prod --build-optimizer

From our own work on angular.io, we saw a 52% size reduction in our production build.

Angular Universal

Server side rendering is a great way to increase perceived performance of your application, and to make your application work better for crawlers like Twitter or Facebook that are scraping your website when users try to share your content.

Angular Universal was released with v4 of Angular and includes all of the underlying APIs necessary to render your Angular application on the server. Universal Support in the CLI makes this easier by allowing you to create a second CLI application via the .angular-cli.jsonconfig that wraps your main application and gives you the option to generate a server bundle.

Learn more about setting up your Angular CLI project to generate server optimzed bundles on the wiki:

angular/angular-cli
angular-cli - CLI tool for Angulargithub.com

Initial Support for early betas of v5

Angular makes major releases approximately every 6 months. Because everything the team does is Open Source, new Angular releases typically don’t have a lot of functionality early in the Beta process, but they can be interesting to try out, and the team hopes to get feedback from early adopters.

By trying and testing upcoming releases of Angular, hopefully you can give them a try and let us know what you think. The 5.0.0 release of Angular will require a later version of the CLI.

1.4 — September 2017

Schematics

One of the major projects from the CLI team is the creation of Schematics. Schematics let you run arbitrary code to execute tree transforms as a way of automatically writing code and generating files. These capabilities let you build your own templates for ng new or ng generate specific to your style or company, build on the templates we have provided for you, or you can do more advanced things such as generating code based on the shape and responses of a remote API.

Schematics is continuing to evolve and is beginning to be documented. To prove the use case and validate the technical foundation of Schematics, 1.4 is the first CLI release to use the new schematics system automatically.

Future of the CLI

The team working on the CLI has a lot of plans for making developers’ lives even easier. Here are a few of the ideas the team hopes to (but doesn’t promise to) include in future releases:

  • Ahead of Time Compilation mode by default — The Angular team is doing a lot of work to make compilation faster, and once the compiler can achieve a similar level of performance to what we see today, we’ll flip the switch and always build with AOT turned on. This will eliminate the problems developers run into with differences between the two modes.
  • ng update — Angular makes patch, minor, and major releases on a very regular basis. The CLI could have the power to help you stay up to date. The Angular team has been working on tools for Material and for internationalization to help automate the update process, taking care of breaking changes for you, and the CLI would be a great place to surface these tools.
  • Library support — Today the CLI can produce UMDs optimized for the browser, and CommonJS bundles optimized for the server. What if the CLI could help you produce a bundle that could be consumed by other Angular applications?
  • Build Optimizer by default — The Build Optimizer is a really promising tool that can help developers ship dramatically smaller bundles to the browser. Once this tool is rock solid and validated by the community, we’ll turn it on by default.
  • Service Worker by default — We believe that helping developers to build great web applications is often going to include shipping your application as a Progressive Web App (PWA) with a service worker. We believe it’s possible to turn these tools on by default without breaking developer expectations around common tasks like uninstall or refresh, and hope to do so in the future.

Get Started

Angular developers all over the world choose the CLI as the easiest way to build Angular apps. Give the CLI a try with either a new project or an existing one and let us know if it helps you, or if there’s more you want to see!