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

Ответ 1

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

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

Затем введите TemplateCompiler в свой конструктор.

constructor(private _templateCompiler: TemplateCompiler)

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

this._templateCompiler.clearCache();

ОБНОВЛЕНИЕ: Angular 2 Бета 17

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

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

Затем введите в свой конструктор RuntimeCompiler.

constructor(private _runtimeCompiler: RuntimeCompiler)

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

this._runtimeCompiler.clearCache();

ОБНОВЛЕНИЕ: Angular 2 RC 1

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

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

Затем введите в свой конструктор RuntimeCompiler.

constructor(private _runtimeCompiler: RuntimeCompiler)

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

this._runtimeCompiler.clearCache();

ОБНОВЛЕНИЕ: Angular 2 RC 4

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

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

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

Затем введите RuntimeCompiler в свой конструктор

constructor(private _runtimeCompiler: RuntimeCompiler)

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

this._runtimeCompiler.clearCache();

UPDATE: Angular 2.0.0 (окончательная первоначальная версия)

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

location.reload();

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

Ответ 2

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

Импорт

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

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

constructor(private _compiler: Compiler) {
}

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

this._compiler.clearCache();

Примечание. Я считаю, что это решение работает от Angular 2.0.0 (окончательная первоначальная версия)

Обновление

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

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

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

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

Ответ 3

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

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

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

Ответ 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'
})

тогда просто выполните gulp release, и вы хорошо поедете вживую

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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