Angular Console – An UI for Angular CLI

When Angular CLI was released, it instantly got the attention, and many developers started using it as it took away all the pain to create Angular based applications. Angular CLI performs every activity required for an angular application starting from creating to deploying the app. You don’t have to spend time for webpack configurations, making tests run, fixing source maps as the CLI takes care. But, one will have to remember all the CLI commands to use it efficiently. To address this, a new tool is available called “Angular Console”. It’s a visual representation of angular CLI. In this post, we’ll see how to get started with Angular Console and create an angular application using the same.

Getting Started with Angular Console

​

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

Angular Console is a cross-platform desktop application. It’s the UI for the angular CLI which means it can do everything the angular CLI can do. You can create projects, interact with your editor, run generators and commands, install extensions without ever touching the terminal. You can even run every angular CLI command via Angular Console and that too without remembering all the flags, names, or paths.

To begin with Angular Console, first download the tool and install it. Once installed, you should see the following.

You can either create a new angular app or import an existing app (Angular Console supports only Angular 6+ applications). Creating an app is pretty straightforward. All you need to do is to, the select the path, provide the workspace name and choose the schematics.

Once you hit the create button, you will find the Angular Console running the Angular CLI command for you to create the workspace and scaffolding the application. Angular CLI has an integrated terminal window. So when you compose and execute your commands visually, you will also see your changes reflected in the inline terminal output in real-time.

Once created, you should see following. You can now serve, test, build and generate component. You can also see the unit test case created for this app.

Let’s build the app now. When you click the build option, it prompts you with the following screen where you can toggle for aot and watch option. You can also select the build configuration. Based on your selection, the command will change accordingly.

Once build successfully, you can also run the application. Like,

You can navigate to localhost:4200 to see the application running. You can also execute the unit test cases.

Other features:

• Discover and install CLI extension directly in the UI. You can search through a comprehensive list of official and community schematics and install them.
• Integrated terminal output to see your changes reflected in the inline terminal output in real-time.
• Allows you to open the code editor and file explorer.
• Supports full-screen mode.

Summary

Angular Console is a useful tool, offers a fast and visual experience of angular CLI. It can do all the things, which you can do with angular CLI. It’s a great tool for beginners as you don’t have to remember CLI commands to start your angular journey. Currently, the tool is in beta release and will become more powerful and full of more features as the future release comes.

Thank you for reading and I hope it helped you. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then