Basic Workflow
Once Angular CLI is installed, you can start using it to create & manage Angular projects. The basic workflow involves creating a new project, generating components, services, & other Angular elements, running the development server, & building the project for production. Let’s discuss this in a step by step manner.
1. Creating a New Angular Project
To create a new Angular project, use the `ng new` command followed by the name of your project. For example, if you want to create a project called `my-app`, run the following command:
ng new my-app
This command will prompt you with a few questions, such as whether you want to include Angular routing & which stylesheet format you prefer (CSS, SCSS, etc.). Answer these questions based on your project requirements.
Once the setup is complete, Angular CLI will generate a new folder with the name `my-app` containing all the necessary files & folders for your Angular project.
2. Navigating to the Project Directory
After creating the project, navigate to the project directory using the `cd` command:
cd my-app
Now, you’re inside the project folder & ready to start working on it.
3. Running the Development Server
To see your Angular application in action, you need to start the development server. Use the following command:
ng serve
This command compiles the application & starts a local development server. By default, the application will be available at `http://localhost:4200`. Open your browser & visit this URL to see your Angular app running.
If you want the server to automatically reload when you make changes to your code, use the `--open` flag:
ng serve --open
This will open the application in your default browser & automatically reload it whenever you save changes.
4. Generating Components, Services, & More
Angular CLI makes it easy to generate components, services, directives, & other Angular elements. For example, to generate a new component called `header`, use the following command:
ng generate component header
This command creates a new folder named `header` inside the `src/app` directory & generates four files:
- `header.component.ts` (TypeScript file for the component logic)
- `header.component.html` (HTML template for the component)
- `header.component.css` (CSS file for styling)
- `header.component.spec.ts` (Test file for the component)
Similarly, you can generate services, directives, & other elements. For example, to generate a service called `data`, use:
ng generate service data
This creates a service file named `data.service.ts` in the `src/app` directory.
5. Building the Project for Production
When you’re ready to deploy your Angular application, you need to build it for production. Use the following command:
ng build --prod
This command compiles the application & optimizes it for production. The output files are stored in the `dist/my-app` folder. You can deploy these files to a web server or hosting platform.
Workspaces and Project Files
Angular CLI organizes applications into workspaces. A workspace can contain multiple projects, including applications and libraries. Important files in an Angular project include:
- angular.json – Configuration settings for the Angular CLI
- package.json – Lists dependencies and scripts
- src/ – Contains the main application code
- node_modules/ – Contains installed dependencies
CLI Command Reference
ng add Command
The ng add command is used to add external packages to an Angular project.
Syntax
ng add <package-name>
Parameter Explanation
- <package-name>: Name of the package to be added.
Example
ng add @angular/material
This command installs Angular Material in your project and updates configuration files.
ng build Command
The ng build command compiles an Angular project into an output directory.
Syntax
ng build [options]
Parameter Explanation
- [options]: Optional parameters for build configuration.
Example
ng build --prod
This command creates an optimized production build.
ng config Command
The ng config command is used to set or retrieve configuration values.
Syntax
ng config <key> <value>
Parameter Explanation
- <key>: Configuration key.
- <value>: New value for the key.
Example
ng config cli.defaultCollection @angular/schematics
This sets the default collection for generating components.
ng doc Command
The ng doc command opens the official Angular documentation for a specified topic.
Syntax
ng doc <keyword>
Parameter Explanation
- <keyword>: Angular topic to search for.
Example
ng doc component
This opens the Angular documentation page for components.
ng e2e Command
The ng e2e command is used to run end-to-end tests for an application.
Syntax
ng e2e [options]
Parameter Explanation
- [options]: Optional parameters for test configuration.
Example
ng e2e --port 4300
This runs end-to-end tests on port 4300.
ng generate Command
The ng generate command is used to create Angular components, services, and other elements.
Syntax:
ng generate <schematic> <name>
Parameter Explanation
- <schematic>: Type of element to generate (component, service, module, etc.).
- <name>: Name of the element.
Example
ng generate component my-component
This creates a new component named my-component.
Frequently Asked Questions
What is Angular CLI used for?
Angular CLI is used to automate tasks such as creating components, building applications, and running tests in Angular projects.
How do I update Angular CLI to the latest version?
Run the following command: npm install -g @angular/cli@latest
Can I use Angular CLI without installing Node.js?
No, Angular CLI requires Node.js and npm to be installed.
Conclusion
In this article, we covered essential Angular CLI commands, which help in creating, developing, and managing Angular applications efficiently. Commands like ng new, ng serve, ng generate, and ng build simplify tasks such as project setup, component creation, and deployment. Understanding these commands enhances development speed, improves project structure, and ensures better maintainability in Angular applications.
518+ registered 
