角度路由在渐进式web应用程序中不起作用

Question

我在我的angular应用程序中添加了PWA功能。然而，从那时起，这些路线就不再像通常在angular应用程序中那样工作了。我在网上找不到任何帮助，因为他们都说在使用ng add时，一切都应该可以找到。

我在Angular 14的nx单回购中工作。

例如：当我第一次启动应用程序时，它会正确导航到/login。当我在/login、I recieve 404 /login not found重新加载页面时

这是我的app.routing.module

const routes: Routes = [
{
path: 'login',
loadChildren: () => import('@blabla/login').then((m) => m.LoginModule),
},
{
path: 'dashboard',
loadChildren: () =>
import('@blabla/dashboard').then((m) => m.DashboardModule),
canLoad: [AuthGuard],
},
{
path: 'error',
loadChildren: () => import('@blabla/error').then((m) => m.ErrorModule),
canLoad: [],
},
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full',
},
{
path: '**',
redirectTo: '/error',
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
enableTracing: false,
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}

我的ngsw-config.json

{
"$schema": "../../node_modules/@angular/service-worker/config/schema.json",
"index": "src/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"src/favicon.ico",

"src/index.html",
"src/manifest.webmanifest",
"src/*.scss",
"src/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
]}

和我的清单文件

{
"name": "EKC",
"short_name": "EKC",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}

Answer 1

问题与安装PWA后Angular Routing失败无关。该错误是由于您在http-server上运行应用程序，并且当您尝试加载/login页面时，服务器上不存在/login页面路由，因此会引发404错误。

要解决此问题，您可以使用代理选项http-server。

http-server -P http://localhost:8080?

?，以确保其捕获所有重定向。