When Creating an Angular Application, it is very important to have a robust and efficient development environment. Angular CLI provides several commands to make the development process easy.
One of the most used commands is ng serve. This command allows you to build and serve the application locally. In this article, we will deep dive into the command ng serve.
Prerequisites
What is ng serve and How it Fits in the Angular CLI?
The ng serve is a part of the Angular CLI a powerful tool that simplifies Angular development by automating common tasks. The command fits into the Angular development workflow by providing a local server that complies with the application in memory allowing for quick testing and iteration without needing a full production build.
How ng serve Builds and Serves Your Application Locally?
When you run ng serve, the Angular CLI compiles your application’s TypeScript and HTML files into JavaScript and serves them through a lightweight development server. This server listens on a specified port (default is http://localhost:4200) and provides a live-reloading feature that refreshes the browser automatically whenever you make changes.
Differences Between ng serve and ng build
While ng serve is used for development, ng build is typically used for preparing your application for production deployment. Here’s a comparison:
- ng serve: Compiles and serves the application with optimizations suited for development. It does not output the compiled files to disk.
- ng build: Compiles the application and outputs the files to the
/dist directory. This command is used to prepare the application for production, with various optimization options available.
Firstly, we have to create an angular application in order to learn about ng serve :
ng new project-name
Create ApplicationFolder Structure
Folder StructureDependencies
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/platform-server": "^18.0.0",
"@angular/router": "^18.0.0",
"@angular/ssr": "^18.0.0",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}Basic Command
This is the basic approach for run the angular application by using the ng serve command with by default port number 4200. And we provide examples and outputs for your reference.
ng serve
Basic Command OutputSpecify Port Number
This is another approach to run the angular application with required port number by using the Angular commands. Below we provide that information for your reference.
ng serve --port 4201
Specify Port Number OutputSpecify Host Name
This is another approach to run the angular application with required host name by using the Angular commands. And here we use host as localhost below we provide that information for your reference.
ng serve --host 0.0.0.0
Specify Host Name OutputSpecify Environment
This is another approach to run the angular application with required Environment by using the Angular commands. And here we use host as localhost below we provide that information for your reference.
ng serve --configuration=production
We don't have any other environment that's why we provide syntax and description only.
Open Browser Automatically
This is another approach to run the angular application with Open Browser Automatically by using the Angular commands. And here we use host as localhost below we provide that information for your reference.
ng serve --open
Open Browser Automatically OutputDisable Live Reload
This is another approach to run the angular application with Disable Live Reload by using the Angular commands. And here we use host as localhost below we provide that information for your reference.
ng serve --live-reload false
Disable Live Reload OutputAOT Compilation
This is another approach to run the angular application with AOT Compilation by using the Angular commands. And here we use host as localhost below we provide that information for your reference. Compiles the application using Ahead of time compilation AOT improves the performance of your application by compiling HTML and Type Script code during build process.
ng serve --aot
Here we don't provide any output because we don't have AOT Compilation
Serve Specific App in a Multi App Workspace
This is another approach to run the angular application with angular application name by using the Angular commands. And here we use host as localhost below we provide that information for your reference.
ng serve project-name
Serve Specific App in Multi App Workspace OutputUnderstanding the Default Development Server
The default development server provided by ng server
- Runs on localhost and listens on port number 4200.
- Supports live reloading which refreshes the browser automatically when code changes are detected.
- Serves the application in development mode enabling features like detailed error messages and easier debugging.
Advanced Options and Flags
--open : opens the application in the default web browser automatically.
ng serve --open
--wash : Enables or disables files watching. File watching is enabled by default.
ng serve --watch=false
--prod : Serves the application using the production configuration
ng serve --prod
Optimizing ng serve for Development
- While live reloading is enabled by default we can further optimize our development experience by using Hot module replacement. HRM replaces only the changed modules without a full page reload, improving performance and preserving the application state.
- You can control how ng serve handles rebuilding by customizing file watching settings and caching strategies. This helps in optimizing the performance of large applications.
- Angular CLI includes build caching mechanism that can turned to improve rebuild times during development.
Best Practices for Using ng serve
- Use ng serve for local development to benefit from live reloading and quick iteration
- Use ng build or ng build --prod when you need to generate a deployable build of your application.
- Integrating ng serve with Development Workflows and IDEs
Similar Reads
angular/router - NPM
Angular is a robust framework for building dynamic web applications. One of its core features is the Angular Router, a powerful module that allows developers to create single-page applications with navigation capabilities. This article will explain more about Angular Router.What is an Angular Router
2 min read
AngularJS $document Service
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $document serv
3 min read
AngularJS $location Service
The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
AngularJS $controller Service
AngularJS applications depend on a controller to control the flow of data through an AngularJS application. AngularJS architecture uses the MVC model i.e the Model View Controller. The model is responsible for maintaining the application data, the View for displaying data or some part of data to the
5 min read
Angular PrimeNG Message Service
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Messages Service in Angular PrimeNG. We will also learn abo
3 min read
Server-Side Rendering in Angular
With fast and efficient web applications, developers are continually seeking ways to enhance performance, user experience, and search engine optimization (SEO). One such strategy is server-side rendering (SSR).In this article, we will see what SSR is, why it is important, and how to implement it in
5 min read
Angular ng new
The Angular CLI (ng new) is a command-line interface through which developers can quickly create and get Angular applications. Furthermore, it brings about simplicity in the introductory phases of development by generating all necessary files and folder structures that are required for an Angular pr
3 min read
Angular Components Overview
Angular Components are the building blocks of Angular applications, containing the template, styles, and behavior of a part of the user interface. This article provides an overview of Angular components, including their structure, features, and how to create and use them effectively. Table of Conten
6 min read
FormBuilder service in Angular
Manually creating and managing reactive forms can be complex, leading to increased development time and potential for errors. In this article, we will see aboutFormBuilder service in Angular, a powerful utility that ease the process of building reactive forms with a fluent API and minimal boilerplat
4 min read
Getting Started with Angular
Angular is a front-end framework for building dynamic web applications. It allows the MVC (Model-View-Controller) architecture and utilizes TypeScript for building applications. So, Angular is an open-source JavaScript framework written in TypeScript. It is maintained by Google, and its primary purp
5 min read