The Angular-CLI is a powerful command-line tool that helps developers create, develop, and maintain Angular applications. In this guide, we will focus on the
ng serve command, which is used to build and start a local development server for your Angular application. We will cover the usage of this command, its various options, and troubleshooting common issues that you might encounter.
Table of Contents
- Serving your Angular Application
- Command Options
- Troubleshooting Common Issues
- Related Links
Before we proceed, ensure that you have the following installed on your system:
To verify that Node.js and Angular CLI are installed correctly, run the following commands in your terminal:
node -v ng version
These commands should display the installed versions of Node.js and Angular CLI, respectively.
Serving your Angular Application
Step 1: Create a new Angular application
If you have an existing Angular application, skip to Step 2. To create a new Angular application, open your terminal and run the following command:
ng new my-app
my-app with your desired application name. This will create a new directory with the same name and set up the necessary files for your Angular application.
Step 2: Navigate to the application directory
Change to the newly created application directory by running the following command in the terminal:
my-app with your application's name.
Step 3: Serve your application
To serve your Angular application locally, run the following command in the terminal:
By default, the application will be served on
http://localhost:4200/. Open your browser and navigate to this URL to view your application.
ng serve command comes with several options that you can use to customize its behavior. Some of the most commonly used options are:
-o: Automatically opens your default web browser and navigates to the application URL.
-p: Specifies the port number on which the development server will listen. For example,
ng serve --port 4500will serve the application on
--configuration=production: Builds and serves the application using production settings.
--ssl: Serves the application over HTTPS.
For a complete list of options, refer to the official Angular CLI documentation.
Troubleshooting Common Issues
Here are some common issues that you might encounter while using the
ng serve command, along with their solutions:
Issue 1: Port 4200 is already in use
If the default port (4200) is already in use by another application, you will see an error message like this:
Port 4200 is already in use. Use '--port' to specify a different port.
Solution: Use the
--port option to specify a different port number, as shown below:
ng serve --port 4500
ng serve command not found
If you see an error message like "command not found" or "ng is not recognized as an internal or external command", it usually means that Angular CLI is not installed correctly or not added to your system's
Solution: Try reinstalling the Angular CLI by running the following command:
npm install -g @angular/cli
If the issue persists, refer to the Angular CLI installation guide for more help.
1. How do I stop the development server?
To stop the development server, press
C in the terminal where the server is running.
2. How do I serve my application with a specific base href?
To serve your application with a specific base href, use the
--base-href option, as shown below:
ng serve --base-href /my-app/
3. Can I serve multiple Angular applications simultaneously?
Yes, you can serve multiple Angular applications simultaneously by running the
ng serve command in separate terminal instances and specifying different port numbers using the
4. How do I enable Hot Module Replacement (HMR) in my Angular application?
To enable Hot Module Replacement, use the
--hmr option, as shown below:
ng serve --hmr
5. How do I view the application in a different browser?
By default, the
-o option opens the application in your default web browser. To view the application in a different browser, manually enter the application URL (e.g.,
http://localhost:4200/) in the desired browser's address bar.
- Angular CLI Official Documentation
- Angular Project Setup Guide
- Angular CLI Serve Command Reference
- Hot Module Replacement in Angular
We hope this guide helps you understand the usage and troubleshooting of the Angular-CLI Project Serve Command. If you have any further questions or issues, please refer to the official Angular CLI documentation or reach out to the Angular community.