So löst man das Angular-Direktvien-Update-Problem

Deutsch   |   Source

Wer in Angular schon öfter an Direktiven gearbeitet hat, kennt vermutlich das Problem: Eine Direktive hat ein Partial, das in einer separaten .html-Datei steht. Wenn in diesem Partial etwas geändert wird, kann man so oft man will die Seite in Chromium neu laden, die Änderung wird einfach nicht sichtbar. Ich habe mich schon Stunden mit diesem Problem herumgeschlagen, da man dann dazu tendiert blind Änderungen vorzunehmen ohne sie testen zu können. Auch das Umschalten auf Firefox nervt, weil es den normalen Workflow unterbricht. Jetzt habe ich endlich die Lösung gefunden.

Die Lösung fand ich hier. Man kann in den Developer Tools (das ist diese "Firebug"-Konsole die sich öffnet, wenn man F12 drückt) oben rechts über das Zahnrad-Icon die Einstellungen öffnen. Dort kann man in den Allgemeinen Einstellungen den Browser-Cache deaktivieren, wenn die Developer-Tools geöffnet sind.

Screenshot wo sich die Einstellung findet

Wenn der Cache so deaktiviert ist, muss man die Seite nur mit geöffneten Developer Tools (F12 danach F5) neu laden und sieht dann sogar die Änderungen an den Partials der Direktive direkt.

Ich werde die Option wohl jetzt standardmäßig aktiviert lassen, weil ich die Developer Tools ohnehin nur dann offen habe, wenn ich sowieso sicher gehen will, dass alles neu geladen wird. Wer eine langsame Internetverbindung hat, kann aber natürlich auch den Cache immer benutzen um Zeit zu sparen.