Pulire la cache dopo il deployment in Angular

Quando create una nuova versione del vostro progetto Angular e la caricate sul server, molto spesso dovete fare il refresh della pagina per fargli visualizzare le modifiche.

Ho visto che l'opzione "outputHashing": "all" è praticamente già attiva di default; quindi a quanto pare non basta.

Ho trovato un piccolo trucco che sembra mi stia funzionando.

Prima di tutto dovete ricordarvi di aggiornare il numero di versione nel package.json, e poi dovete leggerlo (potete vedere questo articolo).

A questo punto nel mio nel file app.module.ts ho effettuato questa modifica:

import {NgModule} from '@angular/core';
...

// @ts-ignore
import {version} from '../../package.json';

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        ...
    ],
    bootstrap: [AppComponent]
})

export class AppModule {

    appVersion: string;

    public constructor() {
        this.appVersion = version;
        if (localStorage.getItem('APP_VERSION') !== this.appVersion) {
            localStorage.setItem('APP_VERSION', this.appVersion);
            window.location.reload();
        }

    }

}

Ho rimosso quello che non mi serviva.

In pratica salviamo la versione nel localStorage ed andiamo a comparare quel valore con quello nel package.json.

Se sono diversi salviamo il nuovo valore e facciamo un refresh della pagina.

Enjoy!