Building Production Ready Angular Apps

This story is not about the details of the practices, configuration and strategy for taking the Angular applications in production. It is also not a tutorial about how to build Angular apps. This is just a check list of the things you might consider for the smooth operation of your application. Enough of the talking…let’s begin.

Following are the things we are going to have a look further :

There are mainly two compilation methods available for Angular apps

When it comes to supporting majority of the browsers by your web application you should consider to have a look at Angular’s cross browser compatibility features and how to enable those.

As we know Angular enables us to develop SPAs (Single Page Applications). Client side routing enables us to render different view according to different URLs in a single page. Angular supports following schemes for URL formation:

In hash based location strategy your application URL with some route will look like: www.abc.com/#/dashboard or www.abc.com/#/orders etc.

The URL fragment after # is route name that decides which view should load on the page at client side.

In Slash (/) based location strategy regular address URLs are used for combining site address with client side routes. www.abc.com/dashboard

It is the default strategy in Angular CLI based project.

You need to set proper basehref and server side routing for every request containing address of your application to index.html of your application.

First thing first, is browser caching of the Web Application good or bad??

So, you guessed it correctly.. it is good but should be under control.

Caching of web pages (including other assets like styles and scripts) is something which is provided by all modern browsers for increasing application’s performance.

But when you release new features to your application which is already in production, this caching feature prevents the user to load latest site resources.

You can overcome this problem by utilizing Angular CLI’s features properly.

Use output-hashing option while building your application using ng build command. It will generate all the build files with different names (Hashed) on every new build. Configure your application server to disable caching of index.html (It is very small in size and we can live without caching it).

Now your application’s index.html page is never cached in browser and user loads it always from server. Other files referenced from index.html are still cached in browser. Whenever new features are released index.html will point to different resources now and will load fresh version and again cache those.

So by following this strategy, we can use caching and cache bursting properly.

People generally complains that Angular build files are too large and may increase application load time. But if you are using caching feature smartly then application will load fast except the first time (After this all large files will be cached in browser).

I will be back with some more exciting stuff. Till then..

Keep Learning — Keep Sharing — Keep Rocking

Related posts:

Future Autonomous Organizations will rely on bots to run their routine and complex tasks better and cheaper than us humans.