Как очистить кеш шаблонов?

Question

В Angular 2, как вы очищаете кеш шаблонов? Есть множество ответов для Angular 1, но нет ответов для 2.

Проблема, с которой я сталкиваюсь, заключается в том, что при изменении содержимого HTML-страниц, на которые ссылается templateUrl на любых компонентах html-страницы не меняются в браузере, пока я не перейду к templateUrl в браузере и нажмите перезагрузить. Я знаю, что вы можете отключить кеш браузера, чтобы решить эту проблему во время разработки, но я обеспокоен тем, что пользователи могут видеть устаревшую HTML-страницу, если они кэшируют ее в своем браузере, когда я иду обновить веб-сайт с помощью Angular 2.

Вот ссылка на вопросы о переполнении стека для Angular 1 AngularJS отключить частичное кэширование на компьютере разработчика

Ниже приведен фрагмент, и у меня возникли проблемы с app.html обновление, когда его содержание изменяется.

@Component({
    selector: 'photogallery-app',
    templateUrl: './app/app.html',
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES]
})

Answer 1

Сначала импортируйте TemplateCompiler.

import { TemplateCompiler } from 'angular2/src/compiler/template_compiler';

Затем добавьте TemplateCompiler в ваш конструктор.

constructor(private _templateCompiler: TemplateCompiler)

Наконец, используйте это, чтобы очистить кеш. Обратите внимание, что это очищает все шаблоны.

this._templateCompiler.clearCache();

ОБНОВЛЕНИЕ: Angular 2 Beta 17

Сначала импортируйте RuntimeCompiler.

import { RuntimeCompiler} from 'angular2/src/compiler/runtime_compiler';

Затем добавьте RuntimeCompiler в ваш конструктор.

constructor(private _runtimeCompiler: RuntimeCompiler)

Наконец, используйте это, чтобы очистить кеш. Обратите внимание, что это очищает все шаблоны.

this._runtimeCompiler.clearCache();

ОБНОВЛЕНИЕ: Угловой 2 RC 1

Сначала импортируйте RuntimeCompiler.

import { RuntimeCompiler} from '@angular/compiler/src/runtime_compiler';

Затем добавьте RuntimeCompiler в ваш конструктор.

constructor(private _runtimeCompiler: RuntimeCompiler)

Наконец, используйте это, чтобы очистить кеш. Обратите внимание, что это очищает все шаблоны.

this._runtimeCompiler.clearCache();

ОБНОВЛЕНИЕ: Угловой 2 RC 4

Сначала импортируйте RuntimeCompiler.

Обратите внимание на изменение пути от RC1. Путь, указанный для RC1, вызовет ошибки при вызове.ClearCache(), если используется с RC4.

import { RuntimeCompiler} from '@angular/compiler';

Затем добавьте RuntimeCompiler в ваш конструктор

constructor(private _runtimeCompiler: RuntimeCompiler)

Наконец, используйте это, чтобы очистить кеш. Обратите внимание, что это очищает все шаблоны.

this._runtimeCompiler.clearCache();

ОБНОВЛЕНИЕ: Angular 2.0.0 (окончательная первоначальная версия)

Это не может быть сделано. У меня есть приложение, которое обслуживает один набор шаблонов для пользователей, вошедших в систему, и другой набор для тех, кто не вошел в систему. После обновления до 2.0.0 я не вижу способа выполнить ту же задачу. Хотя я пытаюсь найти лучший способ реструктуризации приложения, я вместо этого прибегаю к этому:

location.reload();

Это работает (но, очевидно, перезагружает всю страницу).

Answer 2

В Angular 2.0.2 мы можем очистить кэш шаблона следующим образом:

Импортировать:

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

Инжектор зависимостей:

constructor(private _compiler: Compiler) {
}

Использование:

this._compiler.clearCache();

Примечание: я считаю, что это решение работает с Angular 2.0.0 (RTM)

Обновить

В текущих версиях (4.x) Angular clearCache() ибо больше не работает. Об этом уже сообщалось в Angular Github (@Olezt) и, возможно, будет исправлено в будущем.

Объяснение функционального назначения clearcache() метод:

Другой неясный вопрос - это функциональное назначение clearCache() метод, clearCache() несет ответственность за удаление templateUrl, stylesUrl и т. д., указанные в @Component, (Я использую его, чтобы отменить представление, загруженное в templateUrl и запросить обновленное представление сервера, в моем проекте представление, полученное в результате этого запроса, изменяется, например, в соответствии с пользователем / разрешениями обмена. Поэтому нужно отказаться от ранее загруженного.)

clearCache() не действует на кеш браузера или что-либо, кроме Angular, он действует только на @Component, @NgModule и т. д. Угловые кеши, не более того.

Answer 3

В Angular 5.X мы можем использовать компилятор так же, как 2.0.

Импортируем компилятор:

import {Compiler} из '@angular/core';

Вставьте зависимость в ваш конструктор компонента:

конструктор (приватный _компилятор: компилятор) { }

Очистить кеш:

this._compiler.clearCache ();

Answer 4

gulpfile.js

var gulp = require('gulp'),
    replace = require('gulp-replace');

    gulp.task('release', function() {
        // cache busting for html
        gulp.src([app/**'])
            .pipe(replace(/\.html.*'/g, '.html?v' + Date.now() + "'"))
            .pipe(gulp.dest('web/app'));

        // cache busting for js
        gulp.src(['main.html'])
            .pipe(replace(/version = (\d+)/g, 'version = ' + Date.now()))
            .pipe(gulp.dest('src/AppBundle/Resources/views'));
    });

main.html

<html>
    <head>
        <script src="{{ asset('js/systemjs.config.js') }}"></script>
        <script>
            var systemLocate = System.locate,
                version = 1477001404442;
            System.locate = function(load) {
                var System = this;

                return Promise.resolve(systemLocate.call(this, load)).then(function(address) {
                    return address + System.cacheBust;
                });
            };
            System.cacheBust = '?v=' + version;

            System.import('app').catch(function(err){ console.error(err); });
        </script>
    </head>
</html>

ANY-component.ts

@Component({
    selector: 'any-selector',
    templateUrl: '/app/template.html'
})

затем просто выпустите глоток, и вы готовы идти вживую

Answer 5

Следующий вопрос о стеке потока предоставляет отличную стратегию для решения этой проблемы путем добавления параметра версии в URL.

Заставить браузер очистить кеш

Теоретически это должно хорошо работать для производственных выпусков. Затем для разработки я могу просто отключить кеш браузера.

Answer 6

У меня был похожий вопрос. Как быстрый взлом, я решил это, введя глобальную переменную в модуле, как export var fileVersion = '?tmplv=' + Date.now(); - во время разработки и изменить его для производства - и использовать его в таких компонентах, как:

@Component({
    selector: 'my-component',
    templateUrl: '/app/templates/my-component.html' + fileVersion,
})

Так что я должен просто обновить браузер, чтобы увидеть изменения. В производственном использовании export var fileVersion = '?tmplv=v1.3.7yourVersionNumber';,

Answer 7

Я просто добавил строку в templateUrl, чтобы избежать кеширования. Вот мое решение: https://csjdpw.atlassian.net/wiki/x/gCGWAg

Answer 8

Лучшее решение - объединить все необходимые файлы и создать один файл.js, который можно очень легко сделать недействительным, используя простую строку запроса в конце пути (? V =1.x). Для получения дополнительной информации взгляните на этот официальный документ:Введение в Webpack: https://angular.io/docs/ts/latest/guide/webpack.html

Answer 9

Я думаю, что проще всего открыть новый сеанс в режиме инкогнито, потому что ничто не кэшируется, поэтому оно всегда вызывает перезагрузку.