Angular 8 + Angular PWA 路由在直接URL时无法工作。

huangapple go评论76阅读模式
英文:

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:

 {
  &quot;name&quot;: &quot;Yes We Lazio&quot;,
  &quot;short_name&quot;: &quot;Yes We Lazio&quot;,
  &quot;theme_color&quot;: &quot;#1976d2&quot;,
  &quot;background_color&quot;: &quot;#fafafa&quot;,
  &quot;display&quot;: &quot;standalone&quot;,
  &quot;scope&quot;: &quot;/test/&quot;,
  &quot;start_url&quot;: &quot;/test/&quot;,
  &quot;icons&quot;: [
    { &quot;src&quot;: &quot;assets/icons/icon-72x72.png&quot;,   &quot;sizes&quot;: &quot;72x72&quot;,   &quot;type&quot;: &quot;image/png&quot; },
    { &quot;src&quot;: &quot;assets/icons/icon-96x96.png&quot;,   &quot;sizes&quot;: &quot;96x96&quot;,   &quot;type&quot;: &quot;image/png&quot; },
    { &quot;src&quot;: &quot;assets/icons/icon-128x128.png&quot;, &quot;sizes&quot;: &quot;128x128&quot;, &quot;type&quot;: &quot;image/png&quot; },
    { &quot;src&quot;: &quot;assets/icons/icon-144x144.png&quot;, &quot;sizes&quot;: &quot;144x144&quot;, &quot;type&quot;: &quot;image/png&quot; },
    { &quot;src&quot;: &quot;assets/icons/icon-152x152.png&quot;, &quot;sizes&quot;: &quot;152x152&quot;, &quot;type&quot;: &quot;image/png&quot; },
    { &quot;src&quot;: &quot;assets/icons/icon-192x192.png&quot;, &quot;sizes&quot;: &quot;192x192&quot;, &quot;type&quot;: &quot;image/png&quot; },
    { &quot;src&quot;: &quot;assets/icons/icon-384x384.png&quot;, &quot;sizes&quot;: &quot;384x384&quot;, &quot;type&quot;: &quot;image/png&quot; },
    { &quot;src&quot;: &quot;assets/icons/icon-512x512.png&quot;, &quot;sizes&quot;: &quot;512x512&quot;, &quot;type&quot;: &quot;image/png&quot; }
  ]
}

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: &#39;**&#39;, redirectTo: &#39;/home&#39;, pathMatch: &#39;full&#39; } 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 &#39;@angular/service-worker&#39;;
...
constructor(private swUpdate: SwUpdate) {}
...
this.swUpdate.available.subscribe(() =&gt; {
   // 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.

huangapple
  • 本文由 发表于 2020年1月3日 22:27:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/59580289.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定