What is Angular Console and Why You Should Care

Angular Console is a very helpful open source tool that can be used by all Angular developers. Learn why in this step-by-step guide for using Angular console.

Nowadays, there is suddenly a new term being discussed among Angular developers — Angular Console. You might have a friend asking you about have you heard about Angular Console.

In this post, we will see what Angular Console is and how it can be helpful for Angular developers.

Though it was introduced in August 2018, there are still some developers who do not know about this awesome tool, which is free and open source. The intention is to introduce this tool to as many Angular developers as we can.

Note that this tool is not only for newbies, but for all levels of Angular developers including the experts.

It is different than Angular CLI

If we go by the name, we might think that Angular Console is nothing but the Angular CLI. But this is not the case. In simple words, it is the UI for the Angular CLI.

What is Angular Console?

Now coming back around to answer the main question: Angular Console is a desktop product which has been developed by Nrwl, which is a graphical UI for our Angular CLI.

So, it:

• Is a free cross-platform desktop application
• Helps developers to work with Angular CLI work spaces
• Takes all the power of CLI and puts it into graphical interface
• Helps us spend less time in remembering the CLI commands and more time being productive
• Keeps all major commands like ng, build, start, serve just a click away

In my day-to-day development life, I know the pain of remembering the CLI commands. Also some people do not like looking at a black console screen all the time. So Angular Console is the best solution for all these problems.

How to Install Angular Console

So far, you might have gotten a basic understanding of Angular Console, but we learn more when we practice, so let’s see how we can install the Angular Console.

You may either install the Angular Console extension for Visual Studio code directly from Microsoft's marketplace, or download for Windows, Mac or Unix direct from https://angularconsole.com/.

During download, it may ask for consent to allow access as shown below:

How to Use Angular Console

It is very easy to use Angular Console, especially if you have spent a lot of time using Angular CLI. I think you will find Console simpler.

As soon as you complete the download, the screen below will appear, which shows two ways to begin — either create a new workspace from scratch or open existing projects.

Create Workspace

Let’s create a new workspace. Once you start creating a newwork space, it will show a form where you need to provide the information for your new project:

Step 4 is optional, where you can set some configurations like if you want to use IVY (an Opt-in IVY preview is going to be available with Angular 8), if you want to skip “npm install,” if you want to skip initializing git, etc. By default, it sets the value to false.

Without Angular Console, we need to provide this information in the form of CLI commands.

When you click on Create, it will start creating the workspace including installing the dependencies from package.json by running “npm install.”

Till now we have written 0 commands and our application is already created with all required stuffs. Really awesome.

This is how it looks when the workspace is created:

Common Operations, Just a Click Away

If you are an Angular developer, then you might be aware of the number of times we use “ng build” or “ng serve” in a day, and doing this every time from a black console might be bore some.

Here is a better solution with Angular Console: just click on buttons and you are done.

The beauty of Angular Console is that it takes care of very minor things and makes them configurable. For example, I clicked on “Build” button and it asks which environment we want to use, whether want to use “Ahead of Time”(AOT) compiler, etc.:

If I choose, it will select the configuration as production, just like Angular 6+.

Generate, Tasks, Extensions

Using Angular Console, you can generate code, execute tasks, and use extensions, which are main vertical buttons.

Generate Code

Again, whenever we want to add any new component or class or anything with CLI, we have to remember a few commands. But using Angular Console we can do it so easily.

Below are the items among list of those you can generate using Console:

Once selected, you need to provide few details which are generally categorized in “Important” and “Optional” fields. After few clicks, new code will be added to the application without using any IDE or CLI.

Execute Tasks

You can execute almost all important tasks like ng, start, build, test etc. with just single click:

A few of them are package.json scripts, while others are project-related scripts.
Apart from this, it also has some nice graphics for all events. For example, I ran the test command, which opened the browser to:

Install Extensions

With Angular Console, you can also install extensions with just one click.

Below are a few examples of default extensions:

Here, you can see our Progress Kendo UI extension as well.

For example, if you want to add the kendo-angular-popup extension, then just click on the extension, and in the next window click on “Add,” which will add the Kendo UI extension into your application:

Note that it will come under a trial version if you do not have a Kendo UI license as mentioned here: https://www.npmjs.com/package/@progress/kendo-angular-popup

You can find all Progress npm packages here: https://www.npmjs.com/~progress

Executed Task Logs

One more awesome feature of Angular Console is that it shows all recently executed tasks in almost all windows on the bottom as you can see below:

From this window, you can re-run the task or you can delete as well. You can also see the full log with any particular tasks.

It Will be Part of Angular Soon

Now coming back to the question, why an Angular developer should care about this tool.

Though this tool is currently not developed by the actual Angular team, it will soon be part of Angular tools, as the Nrwl team is working closely with the Angular team to transfer the Angular Console responsibilities to the Angular team. So we are sure that Angular Console is going to stay for very long time.

Also, it is an open source project so you may contribute to this awesome project right here: https://github.com/nrwl/angular-console.

Hope it helps!

For More Info on Building Great Web Apps

Want to learn more about creating great web apps? It all starts out with Kendo UI  - the complete UI component library that allows you to quickly build high-quality, responsive apps. It includes everything you need, from grids and charts to dropdowns and gauges.

Learn More about Kendo UI

Get a Free Trial of Kendo UI