Tutorial

Angular Console: Simplifying the Angular CLI Experience

Published on November 1, 2018
author

Seth Gwartney

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.

Note: Angular Console is created by Nrwl. As of the time of this publication, the software is in beta. The website also notes that the version for Linux is experimental.

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.

Screenshot of form for generating a directive.

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Seth Gwartney

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more