Change detection and Angular deployment
1 Like
1. Angular Deployment
When you are ready to deploy your Angular application to a remote server, you have various options for deployment.
How to configure build configuration and execute it in single command
All the build, test, serve configurations are present in angular.json file in Angular6+. When you create and application using Angular CLI, file angular.json got generated in you project folder.
In this file, Under the architect → build → configurations property provide options explained below and just run ng build --configuration=production command to generate build.
Here –configuration=production means go to angular.json file**,** read all option mentioned in architect → build → configurations and generate the build with those options.
Before going into build options lets discuss what ng build command does**.**
ng build: Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
Options: Important one mentioned below for more options
Sample angular.json with all these options setup:
2. On refresh change detection on new build deployment
There are the cases when you deploy a new angular build to server but client browser does not detect the changed and run old code. This happens when the static files gets cached it can be stored for very long periods of time before it ends up expiring. This can be an annoyance in the event that you make an update to a site however, since the cached version of the file is stored in your visitors’ browsers, they may be unable to see the changes made.
Cache-busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn’t retrieve the old file from cache but rather makes a request to the origin server for the new file.
Angular CLI resolves this by providing an –output-hashing flag for the build command.
as in the above point we have seen how to multiple build options
build command
ng build --configuration=production
Now client will retrieve new files every time it see new files in server.
3. Automatic change detection on new build deployment
2 Likes