角+工作盒=构建ChunkLoadError:加载块#并拒绝执行脚本，因为它的MIME

Question

我在第一次生产中将Workbox添加到了ar角，部署一切都很好，但是在更新了一个模块并重新构建了角和注入工作箱之后，我看到服务工作人员更新到新版本并刷新页面，但是现在尝试使用更新的模块时，我会出错。

Refused to execute script from 'https://example.com/8-es2015.203674bf0547eff7ff27.js'
because its MIME type ('text/html') is not executable,

并且启用了严格的MIME类型检查。

main-es2015.45ba4a512f87eefb1b3a.js:1 ERROR Error: Uncaught (in promise): ChunkLoadError:   
Loading chunk 8 failed.(error: https://example.com/8-es2015.203674bf0547eff7ff27.js)
ChunkLoadError: Loading chunk 8 failed......

我查看了chrome上的网络，我看到文件8-es2015.203674bf0547eff7ff27.js是从(磁盘缓存)服务的，与其他由(ServiceWorker)提供服务的文件不同，它的内容是index.html文件，我不知道它是从哪里来的，它甚至不是新构建的一部分？chrome将它放在脚本下面的顶部框架部分中。

造成此错误的原因是什么，在angular.json中有"outputHashing"："all"，我删除所有内容并重新生成，但仍然存在此错误，直到我清除浏览器现金，删除ServiceWorker并进行硬刷新，直到重新加载页面并使其返回。在每次更新之后，我是否需要删除所有的缓存，我认为工作框会这样做--我在automatically.Do中添加了类似于

self.addEventListener('activate', event => event.waitUntil(
   caches.keys().then(cacheNames => cacheNames.forEach(name => caches.delete(name)))
  )
);

我正在使用express，所以我已经将sw.js上的sw.js设置为0，甚至将公共路由更改为静态文件，改为深度路由，但什么也没有。

app.use('/sw.js', express.static(path.resolve('./public/dist/static/sw.js'), {maxAge: 0}));
app.use('/', express.static(path.resolve('./public/dist/static/'), {maxAge: 86400000}));

tools：角8.2.4 -工作盒4.3.1

Update删除了工作框，该应用程序工作正常，正在猜测其新包的原因，或试图使用它的方式。我把它放在从app.module加载的模块服务中，然后从AppComponent ngOnInit调用该服务。这可能是初始化它的错误方式。

代码设置：

import {Workbox} from 'workbox-window';
@Injectable()
export class WorkerService {
  supportWorker: boolean;
  supportPush: boolean;    
  constructor(@Inject(WINDOW) private window: any, private loggerService: LoggerService) {
    this.supportWorker = ('serviceWorker' in navigator);
    this.supportPush = (this.supportWorker && 'PushManager' in window);
  }

  initWorker() {
    if (this.supportWorker && environment.production) {
      const wb = new Workbox('sw.js');
      if (wb) {
        wb.addEventListener('installed', event => {
          if (event.isUpdate) {
            // output a toast translated message to users
            this.loggerService.info('App.webWorkerUpdate', 10000);
            setTimeout(() => this.window.location.reload(), 10000);
          }
        });
        wb.addEventListener('activated', event => {
          if (!event.isUpdate) {
            this.loggerService.success('App.webWorkerInit', 10000);
          }
        });
        wb.register();
      }
    }
  }
}

这是一个应用程序组件，我认为最好在bootstrapModule.then()之后将它添加到bootstrapModule.then()中，但是我不知道如何在这个方法中注入服务

 @Component({
      selector: 'app-root',
      template: '<route-handler></route-handler>'
    })
    export class AppComponent implements OnInit {
      constructor(private ws: WorkerService) {
      }

      ngOnInit(): void {
        this.ws.initWorker();
      }
    }

Answer 1

在以不同的方式设置工作框之后，问题甚至影响到了chrome，在每次构建之后，它在测试时未能清除所有缓存，因此必须使用匿名的方法来确保一切正常工作。

这是拉尔夫·谢尔文章a必须阅读的解决方案。他的方法不是缓存块角生成的块，他还把应用程序使用的所有工作框的生产脚本都放入构建文件夹，最后在index.html中调用workbox窗口来注册服务工作者。