Angular 应用程序必须在新部署后清除缓存

清除 Angular 应用程序缓存的最佳实践

typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
  declarations: [/* your components here */],
  bootstrap: [/* your root component here */],
})
export class AppModule {}

json
// package.json
{
  "name": "your-app",
  "version": "1.0.0", // 更新版本号
  // other configurations...
}

typescript
// app.component.ts
import { Component } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private swUpdate: SwUpdate) {}
  clearCacheAndReload() {
    this.swUpdate.activateUpdate().then(() => document.location.reload());
  }
}