How to clear template cache?

Question

In Angular 2, how do you clear the template cache? There are tons of answers for Angular 1, but none for 2.

The issue I am having is that when I change the contents

Answer 1

I just appended a string to the templateUrl to avoid caching. Here is my solution: https://csjdpw.atlassian.net/wiki/x/gCGWAg

Answer 2

In Angular 2.0.2 we can clear the template cache as follows:

Import:

import { Compiler } from '@angular/core';

Dependency Injector:

constructor(private _compiler: Compiler) {
}

Usage:

this._compiler.clearCache();

Note: I believe that this solution works from Angular 2.0.0 (RTM)

Update

In current versions (4.x) of Angular clearCache() for is no longer working. This has already been reported in the Angular Github (by @Olezt) and possibly will be corrected in the future.

Explanation of functional purpose of clearcache() method:

Another question that is unclear is the functional purpose of the clearCache() method, clearCache() has the responsibility of removing the templateUrl, stylesUrl, etc. specified in @Component. (I use it to discard the view loaded in templateUrl and request a updated view of the server, in my project the view resulting from this request is changed according to exchange user/permissions for example. So the need to discard the one previously loaded.)

clearCache() has no action on the browser cache, or anything beyond the Angular, it only acts on the @Component, @NgModule, etc. Angular caches, nothing more.

Answer 3

I had a similar question. As a quick hack, i've solved this by introducing a global var in a module like export var fileVersion = '?tmplv=' + Date.now(); - at development time and change it for production - 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 export var fileVersion = '?tmplv=v1.3.7yourVersionNumber';.