Wir arbeiten derzeit an einem neuen Projekt mit regelmäßigen Updates, die täglich von einem unserer Kunden verwendet werden. Dieses Projekt wird mit Angular 2 entwickelt und wir haben Probleme mit dem Cache. Das heißt, unsere Kunden sehen nicht die neuesten Änderungen auf ihren Computern.
Hauptsächlich scheinen die HTML / CSS-Dateien für die JS-Dateien ordnungsgemäß aktualisiert zu werden, ohne große Probleme zu verursachen.
ng build
fügt das Hinzufügen des-prod
Tags den generierten Dateinamen einen Hash hinzu. Dies erzwingt das Nachladen von allem aberindex.html
. Dieser Github-Beitrag hatte einige Hinweise, wie man das neu laden kann.Antworten:
angle-cli behebt dieses Problem, indem ein
--output-hashing
Flag für den Build- Befehl bereitgestellt wird (Versionen 6/7, für spätere Versionen siehe hier ). Anwendungsbeispiel:Bundling & Tree-Shaking bietet einige Details und Zusammenhänge. Laufen
ng help build
, dokumentiert die Flagge:Obwohl dies nur für Benutzer von Angular-Cli gilt , funktioniert es hervorragend und erfordert keine Codeänderungen oder zusätzliche Werkzeuge.
Aktualisieren
In einer Reihe von Kommentaren wurde hilfreich und korrekt darauf hingewiesen, dass diese Antwort den
.js
Dateien einen Hash hinzufügt , aber nichts dafür tutindex.html
. Es ist daher durchaus möglich, dassindex.html
zwischengespeichert bleibt, nachdem derng build
Cache die.js
Dateien kaputt gemacht hat .An dieser Stelle werde ich auf Wie steuern wir das Zwischenspeichern von Webseiten in allen Browsern?
quelle
Um einen Weg zu finden, fügen Sie einfach einen Querystring hinzu, um Ihre Komponenten zu laden, wie folgt:
Dies sollte den Client zwingen, die Serverkopie der Vorlage anstelle der des Browsers zu laden. Wenn Sie möchten, dass es erst nach einer bestimmten Zeit aktualisiert wird, können Sie stattdessen diesen ISOString verwenden:
Und Teilzeichenfolge einiger Zeichen, damit sie sich erst nach einer Stunde ändert, zum Beispiel:
Hoffe das hilft
quelle
templateUrl: './app/shared/menu/menu.html?v=' + Math.random()
In jeder HTML-Vorlage füge ich oben einfach die folgenden Meta-Tags hinzu:
Nach meinem Verständnis ist jede Vorlage freistehend, daher erbt sie keine Meta-No-Caching-Regeln, die in der Datei index.html eingerichtet wurden.
quelle
Eine Kombination aus @ Jacks Antwort und @ ranierbits Antwort sollte den Trick machen.
Setzen Sie das ng-Build-Flag für --output-hashing wie folgt:
Fügen Sie diese Klasse dann entweder in einem Dienst oder in Ihrer app.moudle hinzu
Fügen Sie dies dann Ihren Anbietern in Ihrer app.module hinzu:
Dies sollte Caching-Probleme auf Live-Sites für Client-Computer verhindern
quelle
Ich hatte ein ähnliches Problem damit, dass die index.html vom Browser zwischengespeichert wurde oder schwieriger durch mittlere CDN / Proxys (F5 hilft Ihnen nicht).
Ich habe nach einer Lösung gesucht, die zu 100% bestätigt, dass der Client über die neueste index.html-Version verfügt. Zum Glück habe ich diese Lösung von Henrik Peinar gefunden:
https://blog.nodeswat.com/automagic-reload-for-clients-after-deploy-with-angular-4-8440c9fdd96c
Die Lösung löst auch den Fall, dass der Client tagelang bei geöffnetem Browser bleibt, der Client in Intervallen nach Updates sucht und neu lädt, wenn eine neuere Version bereitgestellt wird.
Die Lösung ist etwas knifflig, funktioniert aber wie ein Zauber:
ng cli -- prod
Hash-Dateien mit einer von ihnen namens main. [hash] .js erstellt werdenDa die Henrik Peinar-Lösung für Winkel 4 war, gab es geringfügige Änderungen. Ich platziere hier auch die festen Skripte:
VersionCheckService:
Wechseln Sie zur Haupt-AppComponent:
Das Post-Build-Skript, das die Magie erzeugt, post-build.js:
Legen Sie das Skript einfach in den (neuen) Build- Ordner. Führen Sie das Skript aus,
node ./build/post-build.js
nachdem Sie den dist-Ordner mit erstellt habenng build --prod
quelle
Sie können den Client-Cache mit HTTP-Headern steuern. Dies funktioniert in jedem Webframework.
Sie können die Anweisungen für diese Header so einstellen, dass sie genau steuern, wie und wann der Cache aktiviert oder deaktiviert wird:
Cache-Control
Surrogate-Control
Expires
ETag
(sehr gut)Pragma
(wenn Sie alte Browser unterstützen möchten)Gutes Caching ist in allen Computersystemen gut, aber sehr komplex . Weitere Informationen finden Sie unter https://helmetjs.github.io/docs/nocache/#the-headers .
quelle