Angular CLI + Angular console + VS code + Angular Augury
What I will learn from this article?
- Angular CLI
- Angular console
- Visual studio code
- Angular Augury
- Angular CLI
The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows Angular’s best practices! open the Node.js command prompt and run the below command to install Angular CLI.
npm install -g @angular/cling new
Navigate to the folder path where you want to create Angular project then enter the below command.
ng new my-project
cd my-projectnpm install
Run npm install to install all the dependencies what Angular project needs.
ng serve
Once all Angular dependencies installed successfully run the below command to start the application.
ng serveopen your favorite browser and view the created project by typing “http://localhost:4200”
ng generate
Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these. Run the below command in the project root directory to generate the home component
ng generate component home
(or)
ng g c homeg - generate
c - component
Additional Commands:
To know more about Angular CLI, click the below link.
2. Angular Console
Not all developers can remember all Angular CLI commands and few developers feel CLI is quite intimidating. No worries Here is the Angular console and you can do more and more.
Built by Developers for Developers.
Spend less time looking up command line arguments, and more time shipping incredible products.
The Angular CLI is immensely powerful and extensible. In fact, there are so many capabilities that it can often be hard to remember all of the different configuration options for every available command, or remember that certain features even exist!
Angular Console is, first and foremost, a more approachable way to work with what the Angular CLI already provides.
What more you can do with Angular console?
2.1 Trivial code generation
Leverage the CLI’s built-in generators for Components, Providers and more, all without having to remember a single command line flag.
2.2 Run custom npm scripts
As well as the standard `ng` commands, we automatically detect all of your custom npm scripts and allow you to run them with a single click.
2.3 Discover and install extensions
Search through a comprehensive list of official and community schematics to extend the power of the Angular CLI even further, and install them directly in the UI.
2.4 Build CLI commands visually
Using our visual form-driven UI, you get all of the flags and arguments for your chosen command available inline.
2.5 Integrate terminal output
As you compose and execute your commands in a visual way, you will also see your changes reflected in the inline terminal output in real-time.
2.6 Import existing projects
Create new Angular CLI projects from scratch, or import existing ones. We’ll even keep track of your recently opened projects so you can instantly access them again in future sessions.
To learn more about Angular console, click the below link.
3. Microsoft visual studio code
VS code is great for Angular Application development. VS code is free IDE, highly extensible, fast, developer friendly. Available for Mac, Windows, and Linux.
Install Angular Essentials( Click on view in the menu then click in extensions). Angular Essentials helps to enhance IDE to work better for Angular.
4. Angular Augury
What is Augury?
Augury is the most used Developer Tool extension for debugging and profiling Angular applications inside the Google Chrome and Mozilla Firefox browsers.
Why use Augury?
Augury helps Angular developers visualize the application through component trees and visual debugging tools. Developers get immediate insight into their application structure, change detection and performance characteristics.
Install and analysis Angular Augury
Chrome Augury extension
Debugging and profiling Angular application.
- Run the Angular application with the ng serve command
- Open the developer tool and click on Augury tab
To learn more about Angular Augury, click the below link.
Alright, it’s a time to get our hands dirty.
