发表新帖
发表新帖

How to clear template cache?

后端 未结
关注
9 1399
無奈伤痛
無奈伤痛 2020-11-27 18:04

In Angular 2, how do you clear the template cache? There are tons of answers for Angular 1, but none for 2.

The issue I am having is that when I change the contents

相关标签:
9条回答
  • 梦如初夏
    2020-11-27 18:18

    First import the TemplateCompiler.

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

    Next inject the TemplateCompiler in your constructor.

    constructor(private _templateCompiler: TemplateCompiler)

    Finally use that to clear the cache. Note this clears all templates.

    this._templateCompiler.clearCache();

    UPDATE: Angular 2 Beta 17

    First import the RuntimeCompiler.

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

    Next inject the RuntimeCompiler in your constructor.

    constructor(private _runtimeCompiler: RuntimeCompiler)

    Finally use that to clear the cache. Note this clears all templates.

    this._runtimeCompiler.clearCache();

    UPDATE: Angular 2 RC 1

    First import the RuntimeCompiler.

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

    Next inject the RuntimeCompiler in your constructor.

    constructor(private _runtimeCompiler: RuntimeCompiler)

    Finally use that to clear the cache. Note this clears all templates.

    this._runtimeCompiler.clearCache();

    UPDATE: Angular 2 RC 4

    First import the RuntimeCompiler.

    Notice the path change from RC1. The path listed for RC1 will throw errors when calling .ClearCache() if used with RC4

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

    Next inject the RuntimeCompiler in your constructor

    constructor(private _runtimeCompiler: RuntimeCompiler)

    Finally use that to clear the cache. Note this clears all templates.

    this._runtimeCompiler.clearCache();

    UPDATE: Angular 2.0.0 (RTM)

    It cannot be done. I have an app that serves one set templates for logged in users, and another set for those not logged in. After upgrading to 2.0.0, I can see no way to accomplish the same task. While I try to figure out the best way to re-architect the application, I have resorted to this instead:

    location.reload();

    That works (but obviously reloads the entire page).

    0 讨论(0)
  • 终归单人心
    2020-11-27 18:21

    In Angular 5.X we can use the compiler in the same way as 2.0.

    Import the compiler:

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

    Inject the Dependency in your component constructor :

    constructor(private _compiler: Compiler) { }

    Clear the cache:

    this._compiler.clearCache();

    0 讨论(0)
  • 走了就别回头了
    2020-11-27 18:25

    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'
})

    then just execute gulp release and you are good to go live

    0 讨论(0)
  • 挽巷
    2020-11-27 18:26

    I think the easiest thing to do is open a new session using incognito mode because nothing gets cached so it will always force a reload.

    0 讨论(0)
  • 故里飘歌
    2020-11-27 18:28

    The following stack over flow question provides a great strategy for solving this problem by appending a version parameter to the Url.

    Force browser to clear cache

    This in theory should work great for production releases. Then for development, I can simple disable the browser cache.

    0 讨论(0)
  • 予麋鹿
    2020-11-27 18:31

    A better solution is to bundle all of the required files and produce a single .js file, which can be invalidated very easily using a simple query string at the end of the path (?v=1.x). For more info take a look at this official document: Introduction to Webpack: https://angular.io/docs/ts/latest/guide/webpack.html

    0 讨论(0)
 看不清?
提交回复
热议问题