英文:
Angular 8 + Angular PWA Routing doesn't work with direct URL
问题
I am developing in Angular 8 with Angular PWA. Here you can find what I am talking (for now test it in mobile version by chrome debugger, or you'll see nothing): https://www.yeswelazio.it/test
我正在使用Angular 8和Angular PWA进行开发。您可以在这里找到我正在讨论的内容(现在请在移动版本中使用Chrome调试器进行测试,否则您将什么都看不到):https://www.yeswelazio.it/test
I correctly set my routing rules so:
我正确设置了我的路由规则,如下:
const routes: Routes = [
{ path: '', component: AppComponent },
// Mobile
{ path: 'mobile/home', component: MobileHomeComponent },
{ path: 'mobile/archivio', component: MobileArchiveComponent },
{ path: 'mobile/news/:id', component: MobileNewsComponent },
{ path: 'mobile/contatti', component: MobileContactsComponent },
// Desktop
{ path: 'desktop/home', component: DesktopHomeComponent },
// Error
{ path: '**', redirectTo: '' }
];
This is my manifest.webmanifest file:
这是我的 manifest.webmanifest 文件:
{
"name": "Yes We Lazio",
"short_name": "Yes We Lazio",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/test/",
"start_url": "/test/",
"icons": [
{ "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" },
{ "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" },
{ "src": "assets/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" },
{ "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" },
{ "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" },
{ "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
{ "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Unfortunately, I can't access directly to a URL like https://www.yeswelazio.it/test/mobile/archivio because every time I try, the browser redirects me to https://www.yeswelazio.it/test/mobile/home.
不幸的是,我无法直接访问像 https://www.yeswelazio.it/test/mobile/archivio 这样的 URL,因为每次我尝试时,浏览器都会将我重定向到 https://www.yeswelazio.it/test/mobile/home。
I tried also with {useHash: true} and also commenting { path: '**', redirectTo: '' } from my routing rules.
我还尝试使用 {useHash: true},并且也注释掉了我的路由规则中的 { path: '**', redirectTo: '' }。
I know Angular routing, so I think it's because of PWA. What can I do to access some URL directly?
我了解Angular的路由,所以我认为这是因为PWA。我应该怎么做才能直接访问某些URL呢?
英文:
I am developing in Angular 8 with Angular PWA. Here you can find what I am talking (for now test it in mobile version by chrome debugger, or you'll see nothing): https://www.yeswelazio.it/test
I correctly set my routing rules so:
const routes: Routes = [
{ path: '', component: AppComponent },
// Mobile
{ path: 'mobile/home', component: MobileHomeComponent },
{ path: 'mobile/archivio', component: MobileArchiveComponent },
{ path: 'mobile/news/:id', component: MobileNewsComponent },
{ path: 'mobile/contatti', component: MobileContactsComponent },
// Desktop
{ path: 'desktop/home', component: DesktopHomeComponent },
// Error
{ path: '**', redirectTo: '' }
];
This is my <em>manifest.webmanifest</em> file:
{
"name": "Yes We Lazio",
"short_name": "Yes We Lazio",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/test/",
"start_url": "/test/",
"icons": [
{ "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" },
{ "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" },
{ "src": "assets/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" },
{ "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" },
{ "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" },
{ "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
{ "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Unfortunatelly I can't access directly to a URL like https://www.yeswelazio.it/test/mobile/archivio because every time I try the browser redirect me to https://www.yeswelazio.it/test/mobile/home .
I tried also with {useHash: true} and also commenting <strong>{ path: '**', redirectTo: '' }</strong> from my routing rules.
I know Angular routing so I think it's because of PWA. What can I do to access to some URL directly?
答案1
得分: 1
我遇到了PWA的相同问题,并找到了一种解决方法。
只需从根目录的app.routing.module.ts
中移除重定向{ path: '**', redirectTo: '/home', pathMatch: 'full' }
。
然后,例如创建一个名为404的组件,并将其用于路由**。
这样,用户将在任何未知路由上看到404组件,但浏览器中的URL不会更改。
在404组件中,我使用以下方式检查更新:
import { SwUpdate } from '@angular/service-worker';
...
constructor(private swUpdate: SwUpdate) {}
...
this.swUpdate.available.subscribe(() => {
// 在这里你可以重新加载页面
window.location.reload();
});
现在你的应用将重新加载,用户将看到新页面而不是404组件。
在我的应用中,我添加了一些用户信息,同时检查更新。你可以在methodist.io上查看,尝试编写任何自定义路由。
英文:
I had the same issue with PWA and found one solution for myself .
Just remove redirection { path: '**', redirectTo: '/home', pathMatch: 'full' }
from you root app.routing.module.ts
.
Than create a component 404 for example and use it for routes **.
In this case, users will see 404 component on any unknown route, but url in browser won't change.
In 404 component i check for updates with:
import { SwUpdate } from '@angular/service-worker';
...
constructor(private swUpdate: SwUpdate) {}
...
this.swUpdate.available.subscribe(() => {
// here you can reload your page
window.location.reload();
});
Now your app will be reloaded and users will see new page instead of 404 component.
On my app i added some information for users while checking for updates.
You can check it on methodist.io, try to write any custom route.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论