Я знаю, что есть некоторые похожие вопросы, например неожиданный токен после Angular 2, производственная сборка , но на самом деле он не отвечает на мой вопрос.
В основном у меня есть угловое приложение и его PWA,теперь каждый раз, когда я делаю новую производственную сборку, при первом посещении сайта я получаю сообщение об ошибке:
, а затем, как только я обновляюстраница, сайт работает как обычно.
Это происходит на любом браузере / устройстве
Теперь я подозреваю, что при каждом обновлении приложения основной js-файл в комплекте меняется, а PWA кэшируетстарый, и приложение все еще пытается использовать новый.
Моя структура проекта выглядит следующим образом
У меня есть корневой модуль, который лениво загружает другие модули, теперь первый модуль, который загружаетсямой модуль учетной записи, поэтому пользователь может войти в систему
это мой root-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/account/login', pathMatch: 'full' },
{
path: 'account',
loadChildren: 'account/account.module#AccountModule',
data: { preload: true }
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule],
providers: []
})
export class RootRoutingModule {
}
так техническипервый модуль, к которому пользователь попадает, это модуль учетной записи, но, очевидно, его нужно перенаправить из корневого модуля.
Итак, то, что я сделал, было в моем модуле корневого компонента, и я проверяю, нужно ли обновлять Service Workerвот так ...
root.component.ts
@import { SwUpdate } from '@angular/service-worker'
...
export class...
constructor(
private _sw: SwUpdate
) {
if (this._sw.isEnabled) {
this._sw.available
.subscribe(() => {
this._sw.activateUpdate()
.then(() => {
window.location.reload(true);
});
});
}
}
Теперь нужно проверить, есть ли обновление, а затем просто обновить страницу ..но это не работает.
это мой ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "App",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"!/main*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
Как вы можете видеть, я исключаю файл чанка main.js, который должен устранить эту проблему ... , но это не
Теперь, когда я проверяю вкладку сети после новой сборки, это то, что я получаю
Это изображение было до того, как я исключил файл main.js
так выглядят мои main.js звонки после того, как я исключил его из ngsw.config
I тогдадумал просто попытаться поймать эту ошибку, используя мой обработчик ошибок sentry, вот так ..
export class RavenErrorHandler implements ErrorHandler {
handleError(err: any): void {
console.log('error', err);
if (err.toLowerCase().includes('token <')) {
window.location.reload(true);
} else {
Raven.captureException(err);
}
}
}
но это не работает, я получаю ошибку в sentry, но приложение не перезагружается ??
Теперь я провел некоторое тестирование. Если вы зайдете на сайт после свежей сборки в приватном режиме, вы никогда не получите ошибку, похоже, это произойдет, только если вы посещали сайт раньше, и это заставляет меня думать, что этопроблема с кэшированием
Мое приложение размещено на Azure , и мое приложение использует Angular 7.27
Буду признателен за любую помощь!