Pulire la cache dopo il deployment in Angular

Mattepuffo's logo
Pulire la cache dopo il deployment in Angular

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!


Condividi su Facebook

Commentami!