Deploying Apps with the Angular CLI

The Angular CLI simplifies both the development and deployment of Angular apps significantly. While it's known for boosting development efficiency, its deployment features can sometimes be misunderstood. This article breaks down key insights about the ng build command to optimize your packaging and deployment process for Angular apps.

Key Takeaways

• ng build bundles your app into an output directory for deployment.
• ng serve is for local development, serving the app from memory without generating output files.
• The --prod flag optimizes the build for production, using Ahead-of-Time (AoT) compilation.
• Use --base-href to set the root folder path for the app.

What Does "ng build" Do?

The ng build command packages your application for deployment by optimizing and bundling your JavaScript and CSS files using webpack. By default, files are placed in the /dist directory, unless you specify otherwise.

"ng build" vs "ng serve"

ng serve and ng build both compile your app, but they're not interchangeable. ng serve compiles and serves your app directly from memory, launching a local server for development use. When using ng build, the compiled output writes to disk in the specified directory, ready for deployment.

These commands both rebuild the project but differ in their output handling, with ng build providing a persistent, deployable build.

Development vs Production Builds

By default, ng build prepares a development-level build. Using the --prod flag changes the game, optimizing the code for production by stripping out unnecessary code, minifying assets, and using Ahead-of-Time (AoT) compilation. This pre-compiles your templates, enhancing load time and performance.

ng build --prod

Omitting the --prod flag defaults to a development build.

Build Target vs Build Environment

Use ng build alongside the --configuration flag to specify build settings. This flag replaces the earlier --target and --environment options, consolidating configuration settings in your angular.json file. Create custom environments by adding configurations specific to different deployment needs.

Example:

ng build --configuration=production --configuration=qa

The --base-href Flag

The <base href> tag in the index.html file establishes your application's root URL. Use the --base-href flag to adjust this when server configurations necessitate a different path, like:

ng build --base-href='/myapp/'

The <base href> will then update in index.html to reflect the specified path.

Conclusion

Optimizing your deployment process with ng build involves understanding its roles and capabilities. While it effectively bundles your Angular application, choose between --dev and --prod to suit your environment needs. Adjust by using --base-href and experimenting with different configurations to tailor your app for various environments.

FAQ

What is the primary difference between ng build and ng serve?

ng build generates a production-ready output folder, whereas ng serve compiles and runs your app directly from memory for development.

How do I optimize my application for production?

Use the --prod flag with ng build. This minimizes your app, uses AoT compilation, and applies various optimizations suitable for production.

What happened to the --target and --environment flags?

The Angular CLI now uses the --configuration flag in angular.json to manage build-specific settings, streamlining the process of configuring different environments.