Angular 7 - 延迟加载不适用于 Service Worker
Angular 7 - Lazy Loading not Working with Service Worker
我在 AWS EC2 Ubuntu 实例上部署了我的 node.js / Angular 应用程序。在浏览器中打开项目时,所有延迟加载的模块都不起作用。尽管模块开始加载,但它们从未完成加载。
奇怪的是,当将应用程序部署到 Heroku 或使用本地主机对其进行测试时,一切正常。 (在生产版本中)。
这是部署到 AWS EC2 实例(未加载惰性模块)时网络选项卡的样子:
这是部署到 Heroku 时网络选项卡的样子(工作正常):
这是在本地主机上 运行 时网络选项卡的样子(工作正常):
延迟加载仅在删除我的 service worker 时有效。
app.routes.ts
export const routes: Routes = [
{
path: 'auth',
loadChildren: './auth/auth.module#AuthModule',
},
{
path: 'seller',
canActivate: [guards.AuthGuard, guards.SellerGuard],
loadChildren: './features/seller/seller.module#SellerModule',
},
{
path: 'shopping',
loadChildren: './features/shopping/shopping.module#ShoppingModule',
},
{
path: 'products',
loadChildren: './features/products/products.module#ProductsModule',
},
{
path: 'me',
canActivate: [guards.AuthGuard],
loadChildren: './features/me/me.module#MeModule',
},
{
path: 'search',
loadChildren: './features/search/search.module#SearchModule',
},
{
path: 'business',
loadChildren: './features/business/business.module#BusinessModule',
},
{
path: 'users',
loadChildren: './features/users/users.module#UsersModule',
},
{
path: '**',
redirectTo: ''
},
];
节点-server.js
// many other configurations
app.use('/api', api)
app.get('*', (req, res) => {
res.status(200).sendFile(path.join(__dirname, './client/index.html'))
})
app.listen(port, () => {
console.log(`• Server launched on port`, port)
console.log(`• Server running in ${prod ? ' production' : ' development'} mode`)
console.log(`• • •`)
})
我真的无法post详细的代码,因为这是一个非常大的项目,我不知道是什么原因导致的错误。所以让我知道我是否应该添加一些特定的文件。
Service Worker 实现
app.module.ts
@NgModule({
// ...
imports: [
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
})
],
)}
// ...
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"index.html",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
],
"dataGroups": [
{
"name": "",
"urls": [
"https://www.some-domain.com/api/*",
],
"cacheConfig": {
"maxSize": "15",
"maxAge": "6h",
"timeout": "10s",
"strategy": "performance"
}
}
]
}
从您的资产中删除您的 updateMode 预取。
我在 AWS EC2 Ubuntu 实例上部署了我的 node.js / Angular 应用程序。在浏览器中打开项目时,所有延迟加载的模块都不起作用。尽管模块开始加载,但它们从未完成加载。
奇怪的是,当将应用程序部署到 Heroku 或使用本地主机对其进行测试时,一切正常。 (在生产版本中)。
这是部署到 AWS EC2 实例(未加载惰性模块)时网络选项卡的样子:
这是部署到 Heroku 时网络选项卡的样子(工作正常):
这是在本地主机上 运行 时网络选项卡的样子(工作正常):
延迟加载仅在删除我的 service worker 时有效。
app.routes.ts
export const routes: Routes = [
{
path: 'auth',
loadChildren: './auth/auth.module#AuthModule',
},
{
path: 'seller',
canActivate: [guards.AuthGuard, guards.SellerGuard],
loadChildren: './features/seller/seller.module#SellerModule',
},
{
path: 'shopping',
loadChildren: './features/shopping/shopping.module#ShoppingModule',
},
{
path: 'products',
loadChildren: './features/products/products.module#ProductsModule',
},
{
path: 'me',
canActivate: [guards.AuthGuard],
loadChildren: './features/me/me.module#MeModule',
},
{
path: 'search',
loadChildren: './features/search/search.module#SearchModule',
},
{
path: 'business',
loadChildren: './features/business/business.module#BusinessModule',
},
{
path: 'users',
loadChildren: './features/users/users.module#UsersModule',
},
{
path: '**',
redirectTo: ''
},
];
节点-server.js
// many other configurations
app.use('/api', api)
app.get('*', (req, res) => {
res.status(200).sendFile(path.join(__dirname, './client/index.html'))
})
app.listen(port, () => {
console.log(`• Server launched on port`, port)
console.log(`• Server running in ${prod ? ' production' : ' development'} mode`)
console.log(`• • •`)
})
我真的无法post详细的代码,因为这是一个非常大的项目,我不知道是什么原因导致的错误。所以让我知道我是否应该添加一些特定的文件。
Service Worker 实现
app.module.ts
@NgModule({
// ...
imports: [
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
})
],
)}
// ...
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"index.html",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
],
"dataGroups": [
{
"name": "",
"urls": [
"https://www.some-domain.com/api/*",
],
"cacheConfig": {
"maxSize": "15",
"maxAge": "6h",
"timeout": "10s",
"strategy": "performance"
}
}
]
}
从您的资产中删除您的 updateMode 预取。