How to use the command 'ng' (with examples)

The ’ng’ command is a command-line interface (CLI) tool used to create and manage Angular applications. It provides various commands for generating components, classes, directives, running the application, building it, running unit tests, and checking the version of the Angular installation.

Use case 1: Create a new Angular application inside a directory

Code:

ng new project_name

Motivation:

• Creating a new Angular application using the ’ng new’ command allows developers to quickly bootstrap a new project and set up the basic file structure required for an Angular application.

Explanation:

• ’ng new’ is followed by the desired project name, which will be the directory name for the new application.

Example output:

✔ Packages installed successfully.
Project 'project_name' successfully created.

Use case 2: Add a new component to one’s application

Code:

ng generate component component_name

Motivation:

• Adding a new component using the ’ng generate component’ command helps in creating reusable UI components for an Angular application.

Explanation:

• ’ng generate component’ is followed by the desired component name, which will be used to generate the necessary files and boilerplate code for the component.

Example output:

CREATE src/app/component_name/component_name.component.html (xx bytes)
CREATE src/app/component_name/component_name.component.scss (yy bytes)
CREATE src/app/component_name/component_name.component.ts (zz bytes)
CREATE src/app/component_name/component_name.component.spec.ts (ww bytes)

Use case 3: Add a new class to one’s application

Code:

ng generate class class_name

Motivation:

• Adding a new class using the ’ng generate class’ command allows developers to define and generate class files for application-specific logic or data models.

Explanation:

• ’ng generate class’ is followed by the desired class name, which will be used to generate the necessary class file.

Example output:

CREATE src/app/class_name.ts (aa bytes)

Use case 4: Add a new directive to one’s application

Code:

ng generate directive directive_name

Motivation:

• Adding a new directive using the ’ng generate directive’ command helps in creating custom directives for manipulating the DOM or extending the behavior of HTML elements.

Explanation:

• ’ng generate directive’ is followed by the desired directive name, which will be used to generate the necessary files for the directive.

Example output:

CREATE src/app/directive_name.directive.ts (bb bytes)

Use case 5: Run the application

Code:

ng serve

Motivation:

• Running the application using the ’ng serve’ command launches a local development server and serves the Angular application for testing and development purposes.

Explanation:

• ’ng serve’ is used in the root directory of the Angular application to start the local development server.

Example output:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.

Use case 6: Build the application

Code:

ng build

Motivation:

• Building the application using the ’ng build’ command compiles the Angular application and produces the final optimized bundle of files ready for deployment.

Explanation:

• ’ng build’ is used in the root directory of the Angular application to compile the application files into the ‘dist’ folder.

Example output:

✔ Browser application bundle generation complete.

Use case 7: Run unit tests

Code:

ng test

Motivation:

• Running unit tests using the ’ng test’ command allows developers to execute the unit tests defined for their Angular application and ensure the correctness of their codebase.

Explanation:

• ’ng test’ is used in the root directory of the Angular application to execute the unit tests using the configured testing framework.

Example output:

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   xx passed, yy total
Time:        2.321s, estimated xx s

Use case 8: Check the version of your current Angular installation

Code:

ng version

Motivation:

• Checking the version of the Angular installation using the ’ng version’ command helps in troubleshooting potential issues and ensuring compatibility with the latest versions of Angular libraries and dependencies.

Explanation:

• ’ng version’ is used to display the installed Angular CLI version, Angular core framework version, and other related dependencies.

Example output:

Angular CLI: 13.0.0
Node: 14.17.0
Package Manager: npm 7.21.0
OS: darwin x64

Angular: 13.0.0
... others ...

Conclusion:

The ’ng’ command is a versatile tool for creating and managing Angular applications. It offers a wide range of commands for various tasks, including generating components, classes, and directives, running the application, building it, running unit tests, and checking the Angular version. These examples provide a starting point for using the ’ng’ command efficiently in Angular development workflows.