At ng-conf 2018, the Angular team unveiled an astonishing suite of new features to come with the release of Angular 6. Brad Green, Misko Hevery, and Kara Erickson gave the Day 1 Keynote, in which they showed off what the Google team had been cooking up since ng-conf 2017. One of those things was the next generation of the Angular CLI, and, just as it did in my first ng-conf, stood out to me as a game-changer.
1. Consistent Versioning
Their first big announcement had to do with the versioning of Angular libraries. Before Angular 6, Angular’s three main libraries (Angular Core, Angular Material, Angular CLI) were out-of-sync, making it difficult for developers to tell if package A was compatible with package B. Angular Core (v5.2.10), Angular Material (v5.2.4), and Angular CLI (v1.7.4), as you can tell, had little common in their last pre-v6 releases. Starting with Angular 6, however, the releases of all three libraries will always be aligned at v6.0.0 and remain in sync in the future. This shift will aide in management of your Angular apps and ease the pain of upgrading from one version to another.
2. Painless App Upgrades
The second announcement was the first of two brand new commands: ng update. This command does exactly what you would expect, and more: it updates your Angular libraries to the latest versions in your package.json, and it also fixes your actual code for you. This is an incredibly handy feature when upgrading a project from one major version of a package to the next, as almost any breaking changes will be automatically resolved by CLI.
To use this feature, navigate to an existing local Angular project and run ng update (assuming you are on v6 or higher of the Angular CLI). This will output a list of any supported libraries that are out of date and show you the command to actually process that package update. So, for example, if you wanted to upgrade Angular Material, you would run ng update @angular/material and voila! If all worked correctly, you should see a number of file changes corresponding to where the CLI reconciled your usages of Angular Material.
In his new book, Angular 6 for Enterprise-Ready Web Applications, my colleague Doguhan Uluca covers the app upgrade process in detail. You can learn more about the book on AngularForEnterprise.com.
3. Library Integration
The third announcement included the second new command added to the CLI: ng add [library]. This allows developers to automatically wire up supported libraries into their Angular apps without having to touch any code, similarly to how the ng update command does. To connect Angular Material, all you have to do is run ng add @angular/material, which will add the package to your package.json and add the proper import to your app.module.ts file.
Developers can now also create their own libraries for use with the Angular CLI using the ng generate [library] command. This will generate a new Angular CLI project tailored for library development, complete with building, testing, and deployment capabilities. It also allows developers to create their own CLI integration, so libraries can be used in conjunction with the new commands mentioned here.
4. Component Schematics
The last – and arguably the most riveting – new feature announced was the ng generate [library component] command. This allows developers to initialize and render library-specific components for their application, using what the Angular team calls schematics. Schematics are essentially instructions written by library maintainers that tell the CLI how to create a custom component and get triggered when a user runs the ng generate [library component] command. As with the ng update and ng add [library] commands, the CLI will automatically insert the necessary code into your application to create the specified component.
Angular Material, for example, is one of the CLI-supported libraries that has already added support for component schematics. If you wanted to create a Material data table on the fly, all you would have to do is run ng generate @angular/material:material-table –name=test-table. This will import the necessary modules from the Material library, generate a new component (named “test-table”) that displays the data table on the UI, and even create a service that pre-populates the data table with dummy data (which you can easily swap out for your own API). All you need to do is add the component to the HTML file on which you want to display the table and you are ready to go! Just run ng serve and you should have a fully-functional Material data table wired up.
Conclusion
The newest round of updates to the Angular CLI proves that the Angular team is looking to take the tool to new levels, allowing users to focus less of their time on configuration and more on actual development. Consistent versioning of the suite of Angular tools will provide much-needed clarity down the road, while new library-based commands like ng update, ng add [library], and ng generate [library component] will save developers hours and hours of time by automating routine processes. Third-party library developers will also be able to extend the CLI’s functionality by creating their own schematics-based libraries for others to use with the ng generate [library] command.
As always, the Angular team continues to find ways to evolve their tools and enhance the front-end development experience across the board. Along with the Angular CLI improvements, there were a number of other announcements made at ng-conf regarding brand new tools and advances to existing ones. Stay tuned for Alex Hoffman’s post about Bazel, a vastly improved build tool from Google, and Sam Blissard’s post about Angular Elements, bringing web components support to Angular.