Angular2でCache Busting機能を実装する方法
実装方法
下記のSample.htmlに実装しているSystem.locateプロパティに定義したメソッドでjsのURLをリクエストする際にURLパラメータを付ける処理が実行されます。
注意点
Sample.htmlの様にCache Bustingを実装するとnode_modulesフォルダ内のファイルに対してもCache Bustingが機能してしまうので、デプロイした際にnode_modulesフォルダ内のファイルを一度は読み込んでしまいます。
Cache Bustingが有効なパターン
- sample.component.ts(変更前)で実装されているimportで外部ファイルを読み込む際にもURLパラメータが付与されCache Bustingが機能します。
- test.routing.tsのloadChildrenプロパティで遅延ロードしているsample.module.jsファイルのURIにはURLパラメータが付与されCache Bustingが機能します。
Cache Bustingが無効なパターン(有効にするには)
sample.component.ts(変更前)にはtemplateUrlのhtmlファイルのURIにはパラメータが付与されずCache Bustingは機能しません。なのでsample.component.ts(変更後)ように実装する事でURLパラメータを付与してCache Bustingを機能させましょう。
サンプルコード
Sample.html
<head>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
</head>
<body>
<script>
var version: string = '001';
System.cacheBust = '?v=' + version;
var systemLocate = System.locate;
System.locate = function(load) {
return Promise.resolve(systemLocate.call(this, load)).then(function(address) {
return address + System.cacheBust;
});
}
window.CacheBusting = function(uri: string):string {
return uri + System.cacheBust;
}
</script>
</body>
sample.component.ts(変更前)
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-sample',
templateUrl: 'sample.component.html'
})
export class SampleComponent {}
sample.component.ts(変更後)
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-sample',
templateUrl: window.CacheBusting('sample.component.html')
})
export class SampleComponent {}
test.routing.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const testRoutes: Routes = [
{ path: 'Sample', loadChildren: './sample.module#SampleModule', }
];
@NgModule({
imports: [
RouterModule.forChild(testRoutes)
],
exports: [
RouterModule
]
})
export class TestRoutingModule {}