3

How can one mark versions of an Angular 2 app?

There are some problems like views (via templateUrl) are not getting updated in route views (child components). I've tried things like

<script>
    System.config({
        // baseURL: '/',
        packages: {        
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('v1/app/boot')
        .then(null, console.error.bind(console));
</script>

Or app/v1/boot and playing with base but it's not working.

Note: Just for the record, at development time, cached templates (introduces via templateUrl) do annoyingly slow things. One should use incognito sessions or clear up the browser and the like. I've solved this by introducing a global var in a module like export var fileVersion = '?tmplv=' + Date.now(); and use it in components like:

@Component({
    selector: 'my-component',
    templateUrl: '/app/templates/my-component.html' + fileVersion,
})

So I have just to refresh the browser to see the changes. In production use either fileVersion = ''; or like export var fileVersion = '?tmplv=v3';.

Kaveh Shahbazian
  • 13,088
  • 13
  • 80
  • 139
  • Not an answer, but I use the `disable cache` feature in the `Network` tab of chrome which loads each template fresh each time. Note: This **only** works when the Developer Tools are open. – SnareChops Jan 25 '16 at 00:23
  • Thanks; the problem is how to version the app in production? Like when a user is visiting the website (the app) & we need to deploy a new version that fixes something. – Kaveh Shahbazian Jan 25 '16 at 08:36
  • CDN's and I don't believe that caches last forever. There is a limited TTL and it will fetch anew. – SnareChops Jan 25 '16 at 09:00
  • I am using a CDN and it is still a problem. The HTML and the JS are not updated at the same time and causes errors. – Tomer Almog Jun 27 '16 at 04:40

1 Answers1

1

I am dealing with the same issue. I am looking for something like filerev Node package. For now, my solution is to use angular 2 to clear the cache:

First import the RuntimeCompiler.

import { RuntimeCompiler} from '@angular/compiler/src/runtime_compiler';

Next inject the RuntimeCompiler in your constructor.

constructor(private _runtimeCompiler: RuntimeCompiler) Finally use that to clear the cache. Note this clears all templates.

this._runtimeCompiler.clearCache();

Tomer Almog
  • 3,604
  • 3
  • 30
  • 36