• About Morris Development
  • A Focus for Cloud Efficiency
    • Microsoft Azure
    • Amazon Web Services
  • What our Clients Say
  • Our Products
    • PreschoolDB
    • WebinarDB
  • Contact Us

Morris Development

Custom System Development and Integration

September 9, 2016

Caching Issues for Active Angular Projects.

A huge number of programmers actually work in small businesses, generally dealing with custom solutions for internal systems.  Systems that may get quick tweaks in real-time, where a bug has stopped the flow of business and the developer needs to get the fix in place ASAP.  The problem, with Angular is often that the client doesn’t know to hit Ctrl+F5 and his browser is just showing them the same code as they had – including the bug.

Often, this can be handled by adding a QueryString at the end of a link.  Yes, it’s a horrible practice, but look at the reality:  You may only have 20 people on the system at any given time.  The load on a server pulling down the same js files over and over is negligible.

However, some people’s browsers actually cache the js files and html templates even with a query string!  So, to ensure they are not cached, you need to change the query string for every &@$(*@ template and every single js file.  Sounds like a horrific pain, doesn’t it?

Here’s a quick way to do that AND a useful way to manage the location of all these partials if you want to move them!

As you can see, the caching issue for templates is solved completely. There is still the issue of javascript and css files, but there are other ways. Personally, I keep the index page as a dynamic page, either php or aspx, and simply use a random querystring to ensure a refresh of the files. Then, for release, I bundle all the js files into a nice package (typescript simply guarentees there will be no issues there – awesome -) and name it for the version.

So the step between QA and Production has been reduced to changing the index page’s link to the compiled js, a fresh compile of the js with version number and a new version number in the config file, which could easily be set on the index page with a bit of tweaking.

As you can see, there are a number of tweaks that can be made so this is the most efficient way handle the balance of updates vs management.

For us, we actually don’t even put all the js files bundled and minified until we’ve completed a set of related files that we don’t intend to mess with for a long time. Then, they’ve got a nice directory named after the version and the template anti-caching config bypasses that module when we work on the next section of the site. -best of both worlds.

[disqus]

Article by MacGyver / AngularJS, TypeScript, Web Developer

About MacGyver

I've worked with database systems for over 20 years, and started my own company in 2000. Almost all my business consists of internal database systems, either ERP or CRM. My programming is primarily in Angular / Microsoft C# and MS SQL.

About This Site

Morris Development has been specializing in internal database system design and integration since 1999. We provide long-term management and support of secure data systems for many businesses as well as developing the more complex code structures for ERP systems like Intellievent, Apidas, and AVMS.

This site is primarily for our developers to keep track up various technologies and updates that are used by Morris Development.

Training

Integrating Angular Microsite with .Net

Private Data Caching with Google Storage

Continuous Deployment for Production Releases?

Azure Websites – the perfect Angular host

Angular 2

  • Angular 2 Authentication
  • Angular Command Line Interface
  • Material Design for Angular
  • Using Observables in Angular 2

Mentors

  • Ben Nadel
  • Dan Wahlin
  • Deborah Kurata
  • John Papa

Staff

  • Dan Morris

Training

  • Google Development Courses
  • Microsoft Virtual Academy
  • PluralSight
  • Test Deep Links

© 2025 · Morris Development