The purpose of this article is to examine the differences between the Angular CLI commands ‘ng build’ and ‘ng serve’. These commands serve distinct purposes in the development process of Angular applications.

‘ng build’ is primarily used for building and deploying applications, generating build artifacts that can be deployed to a server.

In contrast, ‘ng serve’ is specifically designed for local development, providing a fast and iterative development experience. It builds, watches, and serves the application from a local CLI development server, with changes made being immediately reflected on the user interface.

Both commands clear the output folder before building the project, but ‘ng build’ writes the generated artifacts to the output folder, while ‘ng serve’ builds artifacts from memory for a faster development experience without writing them to disk.

Furthermore, ‘ng serve’ offers a hard reload mechanism for automatic serving of the Angular code, while ‘ng build –watch’ allows for automatic redeployment during development by regenerating output files when source files change.

Purpose and Functionality

The purpose and functionality of ng build and ng serve differ in that ng build is used for building and deploying apps, while ng serve is used for fast, local, iterative development.

When running ng build, the application is compiled into JavaScript executable code and the build artifacts are written to the output folder. This allows for the deployment of the app to an actual server.

On the other hand, ng serve builds, watches, and serves the application from a local CLI development server. The build artifacts are stored in memory instead of being written to the output folder, providing a faster development experience.

Changes made while running ng serve are instantly reflected on the user interface, making it ideal for quick and efficient development.

Output and Storage

Both ‘ng build’ and ‘ng serve’ handle the generation and storage of build artifacts.

• ‘ng build’ writes the artifacts to the output folder, typically set to ‘dist/’. It clears the output folder before building the project and generates the build artifacts in the output folder.

• ‘ng serve’ does not write the build artifacts to the disk. Instead, it builds the artifacts from memory. This allows for a faster development experience as changes made while running ‘ng serve’ are instantly reflected on the user interface without the need for a manual build or reload.

Usage and Deployment

Usage of ‘ng serve’ is typically on the developer’s machine, while ‘ng build’ is used for deploying the application to a server.

‘ng serve’ is designed for local, iterative development, providing a fast and efficient way to build, watch, and serve the application from a local CLI development server. It allows developers to make changes to the code and see the updates reflected instantly on the user interface, facilitating a streamlined development process.

On the other hand, ‘ng build’ is specifically used for deploying the application to an actual server. It compiles the application into JavaScript executable code and generates build artifacts, which are then written to the output folder for deployment.