The Angular Console is a graphical user interface (GUI) tool for the Angular CLI that was built by the Narwhal Technologies (Nrwl) team. It makes it easier for a beginner who is not familiar with all the Angular CLI commands and with the different options available for each command to use the Angular CLI effectively and learn about different commands along the way. Now, let's learn how to download Angular Console and configure it:
- Download Angular Console from https://angularconsole.com and complete the step-by-step installation.
- When you open Angular Console, you will be given the option to either add a new project or use a current Angular CLI application. Let's go ahead and create a new application:
First, select the parent directory where the project will reside and then name the workspace for the project before selecting a schematic. Angular CLI uses schematics to provide you with different commands and functions that you can use for an application. Here, we are given the choice of using @schematics/angular, which is a default schematic that comes with Angular CLI, and @nrwl/schematics, which is an enterprise-ready monorepo schematic that was built by the Nrwl.io team:
Once the project has been created, you are taken to the Projects page. On this screen, you will see all the applications in the project. In the preceding screen, we can see one project: one is the main app. Additional applications can be configured using the angular.json file in the project.
We also have the Run button, and when you click it, it opens up a dropdown with Build, Serve, Test, Lint and E2e end-to-end test command. Once you click on Serve on the Projects page, you will be taken to the commands detail page. Here, you can add/change different fields, which are categorized into two buckets: Important and Optional. You can see this in the following screenshot:
You can change the fields and click on the Run button at the top to serve the application:
Once the build is complete, just click on the Open App link in the task output to open the application in the browser.
You can close this command execution window by using the close icon in the top left and continue to use other features of Angular CLI using this GUI tool. Angular Console also allows you to add additional Angular CLI extensions. You can navigate to this option using the left menu on the Projects page.
Angular Console is a great tool for those who are beginners to Angular CLI as well as those who cannot keep up with all the commands and their options. Now that we have Angular Console installed, let's install the editor we will be using in this book, VS Code, and configure it for working with Angular projects.