CLI Prompts: My Favorite New Feature in Angular 7
What are CLI Prompts and Why I Think They are Such a Big Deal
Angular 7 is currently in RC (Release Candidate), and is slated for release later this month. It includes numerous changes in the Component Dev Kit (CDK) and the Material Design library, most notably Drag&Drop support and Virtual Scrolling.
Ivy also got some nice progress, including animation support and improved @NgModule integration. I wrote a full-blown post about Ivy and how it works, and how excited I am about all the amazing working the Angular team puts into it. However, Ivy will not be ready for prime time in Angular 7, so don’t hold your breath.
Unlike previously speculated, Integrated Bitcoin Mining didn’t make it into the 7.0 release — so did the highly anticipated Artificial Intelligence Store. 😜
Jokes aside — There is one new feature in Angular 7 that I am particularly excited about: CLI Prompts.
What are Angular CLI Prompts?
When you create a new project using the Angular 6 CLI, you run the ng new command and immediately get a bunch of output on screen — the project creation immediately begins.
Yesterday, when working on the Schematics for TypeWiz, I wanted to test them with the new Angular version. So I installed the Angular 7 CLI and run ng new typewiz-test, expecting to see the usual output. I was surprise when I was greeted with a set of questions instead:
CLI Prompts (also known as Schematics Prompts) provide the ability to ask the user questions before they run, or in other words — executing actions such as creating a new project, adding a new component or setting up a third party library can now become an interactive dialog between the user and the CLI.
The current version support three types of questions: Yes/No (boolean), free text input, or letting the user choose an option from the list (like in the screen shot above).
Why are CLI Prompts Important? 🤔
The ability to pass options to Schematics is not something new — however, the fact that it is there doesn’t mean users are aware of it. For instance, I wasn’t aware that you can create a new Angular project and have the routing set up for you until I prepared on my AngularUP 2018 talk and actively looked for this feature.
Setting up the style was also possible, but still puzzled many Angular developers as you can tell by looking at the number of votes for this StackOverflow Questions.
How many of you have ever typed ng new --help and actually went through all the available options? While writing these lines, I ran this command again and found out there is a new --experimental-ivy option (I’m going to try it just after finishing writing this post!).
Many new Angular developers do not even use the CLI directly — with projects such like AngularConsole (you should check it out, btw) or StackBlitz, you can create an Angular project using a GUI. When you create an Angular project in AngularConsole, you don’t have an option to pass parameters to ng new.
It’s All About Choice ✅
CLI Prompts don’t really add new functionality to Schematics and the CLI — they simply provide a new interface to functionality that already exists. Yet, the ability to interact with the user and ask questions gives the user the feeling of choice.
Starting with Angular 7, when you create a new project, you are the boss. You get to decide how your project will be set up, and you don’t have to dig in the documentation for that — just answer a couple of questions. The process is still automated and you can still just go on with the default, but you make an informed choice when you do so.
Adding these prompts to your existing Schematics is also very simple — you can check out the example in the documentation, or check out how the Routing prompt is implemented for ng new (spoiler: it’s only a single line of code).
To sum up — I’m really excited about this new feature, and I believe it plays an important role in improving the first time user experience for new Angular developers. I’m looking forward to seeing it integrated in IDEs and Angular Console, and more importantly — to see it used in the wild in Schematics created by the community. Kudos to the Angular team! 🙏
This is the 10th post in my Postober challenge — writing something new every single day throughout October.
I will tweet whenever I publish a new post, promise! ✍
