Angular Console: What is it and why is it valuable for you?

Here at Narwhal (Nrwl), we’ve been working with the Angular team over the last 3 months to build a new developer tool that is now becoming widely adopted. It's called Angular Console. As the lead designer/front-end architect, the Angular team invited me to write on the official blog in order to communicate what Angular Console is and what it means for the Angular community going forward.

When trying to learn or design a piece of software, I believe the most important place to start is to concretely define a mental model of what exactly that piece of software is attempting to convey to its end user. So let’s start there, with an overview of Angular console’s current design and feature set. After that, we’ll move onto to a discussion of where the Angular team and Nrwl want to take Angular Console in the future.

Visualizing the Angular CLI

In its current form, Angular Console aims to provide an easy to understand interface for the Angular CLI. The mental model it attempts to convey through Console’s UI design is merely a reflection of the core concepts used by the CLI itself. We believe that mirroring the CLIs mental model through a GUI is beneficial for both experts and novices writing Angular code.

• For novice Angular developers, it is overwhelming to have to learn both about a new framework and also the concepts of a new toolchain at the same time. Our graphical representation of Angular’s toolchain makes learning its concepts easier and more intuitive.
• For more practiced developers, the benefit of mirroring the Angular CLIs core concepts is that they no longer have to parse the Angular CLI’s metadata containing JSON in order to understand an Angular workspace’s structure. Humans were not meant to parse JSON files. Rather, we are far more effective at understanding and enjoying purposefully made user interfaces.
• For both experts and novices, having a GUI is beneficial in that it leads to an emphasize of recognition over recall. Whenever you try to run a command within Console, it shows you the available commands, and you recognize the one you want. Console shows commands associated inputs along with inline documentation, autocompletion, and real-time validation. You no longer need to recall the names of flags and how they are used. Rather, you need merely recognize them.

Angular CLI Core Concepts

For those not well versed in the core concepts employed by the Angular CLI, here’s a brief overview.

• Workspaces: At its highest level of abstraction, the CLI has a concept of an Angular workspace. A Workspace which can be thought of as being analogous to an individual git repository.
• Projects: Drilling down, a Workspace will contain one or many Projects; an individual entity which can be independently compiled. A Project which represents a reusable library.
• Architect Commands: The capabilities of a Project are defined via associated that project with architect commands. Architect commands define the manner by which a Project should be built, served, linted or tested.

Let’s step through each of these concepts and see how they are visually represented within Angular Console.

Workspaces

When launching console, you are immediately presented with a list of all the Angular workspaces you’ve imported into Console in the past. In order to invoke the Angular CLI, we first need to be in the context of a particular workspace. Thus, from here we either need to select a workspace from the list, import one not in the list or create one from scratch.

Project

When a workspace is selected, imported or created, console presents you with a list that workspace’s projects. Each project is associated with a list of quick actions that you can take on that project; either an action to generate code using a schematic or invoke a project’s architect command.

Generation Schematics

On the Generate screen, there is a list of all the code generation schematics within a workspace. If you don’t see a particular schematic you are looking for you need to look no further than the extensions screen. The extensions screens list an ever-growing list of Angular CLI extensions from the Angular community. Once you’ve selected a schematic you can see all of its associated flags along with their documentation. As you edit those flags, Console displays all the files which would be generated with the flags in their current state.

Architect Commands

On the Tasks screen, there is a list of all projects and their associated architect commands. These parsed from the workspace’s angular.json file. You need merely to select a command to begin running it.

In our latest release, we have focused on making this particular use case of using Angular console much better than it was in the past.

• Tasks can be run in parallel in the background while you use Angular Console for other things.
• When a task finishes, we parse that output and render a visualized display of the result.

We are currently working with the Angular team to add more metadata to task runs such that we can continue to improve these graphical outputs.

Going Forward

We are in the process of transferring the responsibility of building and publishing Angular Console binaries to the Angular team. This will make Console an official tool and will give the community the confidence that Console is here to stay, and that is is a tool every developer should have in their toolbelt alongside Angular CLI. We are also talking with the Angular team about adapting angular.io guides to use Console.

Angular Console is meant to be a community driven product. Its purpose is merely to make you, Angular developers, more effective and efficient at creating beautiful applications and libraries. Any features we’ve introduced into Console at this point and any features we will introduce in the future have only this goal in mind. Ultimately we want the Angular community to define what console will become going forward. It is my sincere hope that the entire community will feel excited and welcome to bring their own ideas for Console to the table. If you have a cool idea for a feature that you think would be awesome to have please do one of the following things:

• Go to our GitHub page at https://github.com/nrwl/angular-console and file an issue
• Or better yet, make a PR

Let’s make something awesome together.

Get Angular Console

Visit angularconsole.com — the official site of the project. Go there and download it.