Angular + Workbox = build ChunkLoadError：正在加载块＃，并拒绝执行脚本，因为其MIME
我已经在第一次生产中将Workbox添加到Angular中，部署一切正常，但是在更新模块并重建angular和注入Workbox之后访问该站点之后，我看到服务人员将更新到新版本并刷新页面，但是现在尝试使用更新的模块我得到错误
Refused to execute script from '.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: .203674bf0547eff7ff27.js)
ChunkLoadError: Loading chunk 8 failed......
我查看了chrome中的网络，发现文件8-es2015.203674bf0547eff7ff27.js是通过（磁盘缓存）提供的，这与（ServiceWorker）提供的其余文件不同，内容是index.html文件，我不知道它来自哪里，甚至不属于新版本？ chrome将其放在脚本下的顶部框架部分
此错误的原因是什么，在[[angular.json中，我有“ outputHashing”：“ all”，我删除了所有内容并重建，但是仍然出现此错误，直到清除浏览器现金后才删除ServiceWorker并进行强制刷新，直到我重新加载页面并返回错误为止，错误才会停止。我是否需要在每次更新后删除所有缓存，我认为Workbox会自动执行此操作。是否在sw.js中添加类似内容]
self.addEventListener('activate', event => event.waitUntil(
caches.keys().then(cacheNames => cacheNames.forEach(name => caches.delete(name)))
)
);
我正在使用express，所以我将sw.js上的maxAge设置为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}));
：角度8.2.4-工作箱4.3.1工具
更新
删除了工作箱，该应用程序正常运行，猜测其原因是其新软件包workbox-window或尝试使用它的方式。我将其放置在从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（）之后将其添加到main.ts中，但我不知道如何在此方法中注入服务回答如下：[以不同的工作方式设置Workbox之后，该问题甚至影响了chrome，在测试每次构建后，chrome都无法清除所有缓存，必须使用隐身模式才能确保一切正常。
@Component({ selector: 'app-root', template: '<route-handler></route-handler>' }) export class AppComponent implements OnInit { constructor(private ws: WorkerService) { } ngOnInit(): void { this.ws.initWorker(); } }
这里是必须阅读Ralph Schaer文章的解决方案。他的方法不是缓存-角构建生成的块，也将应用使用的所有工作箱生产脚本都放到了构建文件夹中，最后进入index.html中，他调用了工作箱窗口来注册服务-工人。
Angular + Workbox = build ChunkLoadError：正在加载块＃，并拒绝执行脚本，因为其MIME
我已经在第一次生产中将Workbox添加到Angular中，部署一切正常，但是在更新模块并重建angular和注入Workbox之后访问该站点之后，我看到服务人员将更新到新版本并刷新页面，但是现在尝试使用更新的模块我得到错误
Refused to execute script from '.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: .203674bf0547eff7ff27.js)
ChunkLoadError: Loading chunk 8 failed......
我查看了chrome中的网络，发现文件8-es2015.203674bf0547eff7ff27.js是通过（磁盘缓存）提供的，这与（ServiceWorker）提供的其余文件不同，内容是index.html文件，我不知道它来自哪里，甚至不属于新版本？ chrome将其放在脚本下的顶部框架部分
此错误的原因是什么，在[[angular.json中，我有“ outputHashing”：“ all”，我删除了所有内容并重建，但是仍然出现此错误，直到清除浏览器现金后才删除ServiceWorker并进行强制刷新，直到我重新加载页面并返回错误为止，错误才会停止。我是否需要在每次更新后删除所有缓存，我认为Workbox会自动执行此操作。是否在sw.js中添加类似内容]
self.addEventListener('activate', event => event.waitUntil(
caches.keys().then(cacheNames => cacheNames.forEach(name => caches.delete(name)))
)
);
我正在使用express，所以我将sw.js上的maxAge设置为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}));
：角度8.2.4-工作箱4.3.1工具
更新
删除了工作箱，该应用程序正常运行，猜测其原因是其新软件包workbox-window或尝试使用它的方式。我将其放置在从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（）之后将其添加到main.ts中，但我不知道如何在此方法中注入服务回答如下：[以不同的工作方式设置Workbox之后，该问题甚至影响了chrome，在测试每次构建后，chrome都无法清除所有缓存，必须使用隐身模式才能确保一切正常。
@Component({ selector: 'app-root', template: '<route-handler></route-handler>' }) export class AppComponent implements OnInit { constructor(private ws: WorkerService) { } ngOnInit(): void { this.ws.initWorker(); } }
这里是必须阅读Ralph Schaer文章的解决方案。他的方法不是缓存-角构建生成的块，也将应用使用的所有工作箱生产脚本都放到了构建文件夹中，最后进入index.html中，他调用了工作箱窗口来注册服务-工人。