Angular Console: Simplifying the Angular CLI Experience

If you’ve spent any time at all with Angular (and if you’re reading this, I am assuming you have), then there is no denying the power and convenience that is the Angular CLI. In just a few keystrokes, you can generate a fully-featured web app. This is great for many developers, but some developers - especially those coming from a non-Unix development environment - may prefer a more UI-oriented way to take advantage of the CLI, taking the guesswork out of all the options available to all the commands. This is where Angular Console comes in. Let’s get started!

Download and Install Angular Console

Head over to Angular Console, and download and install the tool for your platform. Angular Console is a desktop application, and the installation wizard should be familiar to you.

Create a New Workspace

When you first run the application, your first step is either to open an existing workspace or create a new workspace. For the purposes of this demo, we’ll create a new workspace. Note that if you did want to open an existing workspace, Angular Console is only compatible with Angular 6+ projects.

When you create a new Workspace, you’re given a little wizard to pick the parent directory, name your workspace, and select a schematic. You don’t need to manually create a folder just for your project; just pick the directory that will hold your project, and a new folder will be created for your project based on whatever you named it. As of right now, the two schematics to choose from are @schematics/angular (the default used by Angular CLI), and @nrwl/schematics, a custom schematics package created by Nrwl.

Click “Create” in the top right. You’ll actually see the CLI go to work creating the app and installing dependencies.

Managing a Workspace

Once you’ve created a Workspace, managing it is pretty straightforward - no need to have the Angular CLI reference open next to you in order to perform common tasks. Within a workspace, you may have more than one application - if you’ve run the previous step, you’ll see two: your main project, and a protractor project for end-to-end testing. Each application will have a short list of common CLI tasks, such as the ability to serve, test, or generate new components.

On the left nav, you have a few more advanced options.

Generate Code

This section allows you to generate any new piece of code for your application based on any schematics loaded through extensions (see below). For example, if you generated your project based on the @schematics/angular schematics, your options may include:

• serviceWorker
• application
• component
• directive
• guard
• module
• pipe
• service

…and several others.

If you’ve added extensions, then you may see many other options of things to generate.

Clicking on a schematic gives you a form for all of the available options for that schematic. Just fill out the form - it’s organized into “Important” and “Optional” fields - and click “Generate”, and voilà! No more guesswork about what all the options are for ng generate! Everything that is defined for that schematic is available in this form, along with a helpful hint about what each option means.

Angular Console form for generating a directive.

Run Tasks

On this tab, you’ll see a list of other common CLI tasks for your projects, along with any package.json scripts that are defined. CLI tasks include build, extract-i18n, lint, serve, and test; and each of these include a similar form to the code generation schematics, to give you a clear picture of all the options you can include in your tasks.

Extensions

Angular Console also allows you to “extend” the number of schematics available by offering other schematics packages to include. Once you add a package, those code generation items are now available in the “Generate Code” tab. For example, I added the @angular/material package, and the following schematics appeared, each with its own form that defined all the options available:

• ng-add-setup-project
• dashboard
• table
• nav
• tree
• addressForm

Conclusion

Angular Console is a neat and clean UI-based tool to expedite and simplify a developer’s experience with the Angular CLI. Even if you’d still prefer to use the CLI directly for most of your tasks, it is worth taking a look at Angular Console - like me, you may learn about different schematics and options that you didn’t even know existed.

However, there are some limitations, such as a very sparse option set when generating a new workspace/application, or the inability to add your own custom schematics packages. However, this is fairly new, actively-maintained, open-source software; so any of these features (or lack thereof) mentioned in this article may change as new versions are released.

Further Reading

• Angular Console website
• Introduction to Schematics
• Angular CLI reference