Deploying Apps with the Angular CLI

The Angular CLI has largely simplified both the development and deployment of Angular apps. While using the Angular CLI can greatly increase development efficiency, many of its deployment features are misunderstood. In this article, we explain the most important things to know about the ng build command when packaging and deploying your Angular apps.

What does "ng build" do?

The ng build command builds and bundles your application for deployment. It uses webpack to optimize and bundle your JS and CSS files. It then packages your files into an output directory /dist unless specified otherwise.

"ng build" is not the same as "ng serve"

While ng serve and ng build do some of the same things, they are not interchangeable. When you run ng serve, the CLI builds and bundles the app and starts a web server. The compiled output is served from memory, not from disk. This is an important distinction from ng build which simply compiles the output and writes it to the output directory.

It should be noted that both commands delete and rebuild the project. The key difference is ng serve pulls from memory to launch a web server whereas ng build simply builds and generates the output directory. Note that ng serve does not produce an output directory since everything is served from memory.

The difference between "ng build --dev" and "ng build --prod"

By default, ng build packages your code to run in a development environment. While this is great for development, it doesn't optimize the resulting bundle files for a production environment. Specifically, you'll want to remove unused code, comments, and empty lines from your files to reduce bundle size and optimize performance. By running ng build --prod, you can do just that.

By specifying a production build with the --prod flag, the CLI will optimize your app bundle by removing unused code, empy lines, etc. It will also rename variables to single letters and perform other cleanup tasks to further optimize your JS and CSS files.

The --prod flag also uses ahead-of-time-compilation (AoT) rather than just-in-time (JiT) compilation. While the difference between AoT and JiT lies outside the scope of this article, the key difference is that AoT pre-compiles your Angular templates into JS before bundles are created. This eliminates the need for the browser to compile templates and drastically improves page load time.

ng build --prod

Remember that if you don't specify an environment (--dev, --prod) then ng build will default to using a dev configuration.

Difference between build target and build environment

The ng build command accepts optional arguments for specifying both the --target and --environment. While the --target flag specifies either dev or prod (as explained above), the optional --environment flag specifies an environment file to use for the build.

You can check out the existing environment files for both dev and prod in the .angular-cli.json file. The whole point of this flag is to allow you to create and modify different environments for different builds.

For example, if you have a QA environment, you could create an environment file with configurations specific to that environment. You could then use the --environment flag to use the QA config file from the command line and override the defaults for dev or prod.

Example:

ng build --target=production --environment=qa

The --base-href flag

Angular utilizes the <base href> tag to specify the root folder of the application. All assets and resources for the app are referenced based on this path. This tag can be found in the index.html file for the app and specifies the root URL to be used for navigation, etc.

While the default value / is usually fine, sometimes your server configuration requires a different root path for serving your Angular app resources.

The optional --base-href flag allows you to specify this path with your builds. For example, if you run:

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

Conclusion

When deploying your Angular apps, it's important to remember these tips for using the ng build command. While running ng build conveniently bundles your application, it's important to remember the difference between using --dev and --prod as well as the difference between ng serve and ng build. Also remember that by specifying different environment files you can configure your builds for different environments.

Your thoughts?