Basic Angular CLI Commands for Software Engineers
Working with the command-line interfaces (CLI) is an integral part of a software engineers’ journey. Basically, a CLI accepts a command and some arguments and executes a specific task or program accordingly.
The Angular CLI is command-line tool that allows you to scaffold, develop and maintain Angular applications.
In this guide we will take a look at some common Angular CLI commands. Let’s dive in.
Install Angular CLI
If you don’t have Angular CLI installed on your machine follow along to install it.
You can easily install the Angular CLI via node package manager (npm). To install the Angular CLI globally simply run the following command:
$ npm install -g @angular/cli
Scaffold an application
Now that you have the Angular CLI installed. Go to your projects directory and scaffold a new application named my-ng-app by running the following command:
$ ng new my-ng-app
The structure of the application will look like the one below.
Serve the application
To serve the application use the serve command. First go to the applications root directory with this command.
$ cd my-ng-app
Then to serve the application, run the following command
$ ng serve
Note: As you make code changes to your application the application will rebuild and serve the changes automatically.
Generate a component
As your application grows in size, you will want to add more components. To create a new component simply run the generate component command followed by the name of the component.
For example, to scaffold a component named my-component. Run the following command.
$ ng generate component my-component
Create a service
An Angular service will hold common functionality or logic that will be used in several modules or components.
To create a service using the CLI, use the generate service command. For example, to add a service named my-service. Run the following command.
$ ng generate service my-service
Run a command without making changes
Sometimes you want to test-run a command but not make any changes to the file structure. That’s where the --dry-run command flag comes in handy.
For example to see the effect of generating a component called test-app. Run the following command.
$ ng generate component test-app --dry-run
The output will be similar to the one below.
The output simply says that the CLI will generate a test-app component and place it in the src/app/ directory.
In addition, the CLI will update the app.module.ts file with the new component.
Finally, the Note reminds you that no changes were actually made.
Run unit tests
Unit tests are important to make sure that there is no flaw in your code logic.
When you generate a component or service via the CLI, a corresponding unit test file is automatically scaffolded.
To run unit tests use test command as follows
$ ng test
Build an application
To make a production build of your application, use the build command with the --prod flag. Run the following command in the applications root directory.
$ ng build --prod
The command above compiles your Angular application and places the output in the /dist directory i.e under the apps root directory.
Most of all is the help command. With time, you will be able to remember most of the CLI commands off the top of your head.
But in case you forget some command use the help command to check out available Angular CLI commands.
$ ng help
To get more information about a specific command use the -- help flag. For example, to find out more about the generate component command. You can run the following.
$ ng generate component --help
Way before graphical user interfaces existed, people interacted with computers via the command line interface.
Command Line Interfaces have withstood the test of time for a good reason. They provide a quick, concise and predictable manner of carrying out both mundane and complicated tasks.