Among the scripts provided by Angular CLI, the “serve” script is used for running and testing the application in a development environment. And the “build” script for packaging and deployment. However, there are use cases for using build output on a developer’s machine and watching for changes. Explore the scenario!

Angular: Watch Build for Changes

Using build --watch script

You may use the watch option on Angular build for updating the output as and when developers make changes to the code. It is very similar to serve, except that the application runs a different web server from the default dev server.

Background

Most of us would have used the ng serve command provided by Angular CLI. By default, it runs on npm start. This command builds and runs the code. Notice the following configuration in the file angular.json. It uses @angular-devkit’s build-angular package and deploys on a dev server. It internally uses Webpack. This setup is used for development purposes, on a developer’s machine.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
        "production": {
        "browserTarget": "memy:build:production"
    },
        "development": {
        "browserTarget": "memy:build:development"
    }
  },
"defaultConfiguration": "development"
}

However, when you build and deploy the code, you use the ng build command, which packages the application into a few files in a /dist/application-name directory. This is suitable for shipping to an environment like staging or production.

Using the build output in development setup

As mentioned earlier, the default option deploys code on Webpack. As you make changes to the code, it’s compiled on the fly. You can see the changes instantly, validate and test them. What if you need the code deployed on another web server? Say Http-Server or Nginx installed on developer’s machine.

Consider the following solution. Use the --watch option on the build command. See the following snippet.

"watch": "ng build --watch --configuration development",

As you make changes to a file, the watch recompiles and rebuilds the code. The dist/application-name directory is updated with the latest code.

Note: Use the --configuration option to perform a development or a production build. How do they differ? In an example, the development configuration uses a different environment configuration file from production (environment.ts or environment.prod.ts)

Why build and deploy on a separate web server

In a sample use case, imagine creating an installable progressive web app (PWA). The Service Worker does not work (at the time of writing this article) with the Angular CLI’s serve command. See the GitHub issue 9869 for details. Hence, to verify and test the progressive web app, build code with the watch script.

npm run watch
# (or)
# yarn watch

It creates the build output in the dist/application-name directory (by default, unless you edit in Angular.json).

Next, run Http-Server on the dist directory

http-server dist/application-name
# use npx if http-server is installed globally, at the machine level
# npx http-server dist/application-name

As you make changes to the application, the watch script rebuilds the application. The output will be replaced in the dist directory. Reload the browser to see changes.

A progressive web app can register the Service Worker for an application running on Http-Server. It also shows the install button on desktop or mobile devices. With the --watch option, you eliminate a manual step to rebuilding every time you make a change to the code base.

References

• Angular documentation on Getting Started with Service Workers — link
• Angular documentation on ng build — link
• Angular Github Issue — Feature Request: ng serve with service worker — link

More content at plainenglish.io. Sign up for our free weekly newsletter here.