Angular: Up and Running

Chapter 12. Productionizing an Angular App

In all the chapters so far, we have talked about the various bits and pieces that add up to an Angular application. We started at the very basic, and went to the more detailed and complex, from simple components to routing and server calls. But through all this, we focused on functionality and getting different bits to interact and play well together. At this point, you as a developer are ready to tackle 90% of most Angular application needs.

In this chapter, we will focus on what it takes to get that application you have built out into production in a performant manner. We will cover all the things you will have to keep in mind when deploying your Angular applications to production, as well as some other concerns that you may not have thought of. We will cover how to build an Angular app for production, how to reduce the size of the build, how to improve the performance, and even briefly cover other concerns like SEO.

Building for Production

So far, whenever we run our application, we usually ask the Angular CLI to serve our application, by running:

ng serve

This runs the Angular compiler, and builds and serves your Angular application using the internal server that the Angular CLI has. You could use the build command to generate the files to serve it for production as well. The command would simply be:

ng build

This would by default generate all your compiled files in a folder called dist/. You can then simply copy everything from ...