如何清除模板缓存?

时间:2016-01-15 09:31:10

标签: angular

在Angular 2中,如何清除模板缓存? Angular 1有很多答案,但是没有2个答案。

我遇到的问题是,当我在任何组件上更改templateUrl引用的html页面的内容时,html页面不会在浏览器中更改,直到我手动导航到{{ 1}}在浏览器中点击重新加载。我知道您可以在开发过程中禁用浏览器缓存来解决这个问题,但我担心的是,当我使用Angular 2更新网站时,如果用户将其缓存在浏览器中,则会看到过时的html页面。

这是Angular 1的堆栈溢出问题的链接 AngularJS disable partial caching on dev machine

以下是一个代码段,我在更新内容时遇到templateUrl更新问题。

app.html

9 个答案:

答案 0 :(得分:21)

首先导入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();

更新: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();

更新:Angular 2.0.0(RTM)

无法做到。我有一个应用程序,为登录用户提供一组模板,另一组用于未登录的用户。升级到2.0.0后,我看不到完成相同任务的方法。虽然我试图找出重新构建应用程序的最佳方法,但我采用了这个方法:

location.reload();

可行(但显然会重新加载整个页面)。

答案 1 :(得分:13)

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() for不再有效。这已经是reported in the Angular Github(来自@Olezt),将来可能会更正。

clearcache()方法的功能目的说明:

另一个不清楚的问题是clearCache()方法的功能目的,clearCache()有责任删除templateUrl中指定的stylesUrl@Component等。 1}}。 (我用它来丢弃templateUrl中加载的视图并请求更新的服务器视图,在我的项目中,根据交换用户/权限更改了此请求产生的视图。所以需要丢弃一个先前加载的。)

clearCache()对浏览器缓存或Angular以外的任何内容都没有操作,它只对@Component@NgModule等角色缓存执行操作。

答案 2 :(得分:3)

以下堆栈溢出问题提供了一个很好的策略,可以通过将版本参数附加到Url来解决此问题。

Force browser to clear cache

理论上这应该适用于生产版本。然后进行开发,我可以简单地禁用浏览器缓存。

答案 3 :(得分:3)

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>

任何-component.ts

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

然后只需执行gulp release即可开始使用

答案 4 :(得分:3)

在Angular 5.X中,我们可以以与2.0相同的方式使用编译器。

导入编译器:

从“ @ angular / core”导入{编译器};

在您的组件构造函数中注入依赖项:

构造函数(私有_compiler:编译器){ }

清除缓存:

this._compiler.clearCache();

答案 5 :(得分:2)

我有一个类似的question。作为一个快速入侵,我通过在开发时引入一个像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 :(得分:1)

我只是将一个字符串附加到templateUrl以避免缓存。这是我的解决方案:https://csjdpw.atlassian.net/wiki/x/gCGWAg

答案 7 :(得分:0)

更好的解决方案是捆绑所有必需的文件并生成单个.js文件,使用路径末尾的简单查询字符串(?v = 1.x)可以非常轻松地使其无效。有关更多信息,请查看此官方文档: Webpack简介https://angular.io/docs/ts/latest/guide/webpack.html

答案 8 :(得分:-3)

我认为最简单的方法是使用隐身模式打开一个新会话,因为没有任何内容被缓存,所以它总会强制重新加载。