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.
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.
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.
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.
During download, it may ask for consent to allow access as shown below:
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.
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:
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+.
Using Angular Console, you can generate code, execute tasks, and use extensions, which are main vertical buttons.
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.
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:
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
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.
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!
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.
Neel is a tech enthusiast, blogger, writer, speaker and a lead developer. He has six years of professional experience. Apart from being a developer, he is an award-winning tech blogger. He likes to stay up-to-date with the latest technology stack, and he likes to share his knowledge with the community. He is a DZone MVB and Top 4% overall on the StackOverflow site. He is currently working on a data security product. You can find him at his site: https://neelbhatt.com
Subscribe to be the first to get our expert-written articles and tutorials for developers!