2

目前，我有一个带有 PWA 的 Angular 应用程序，每当我向我的应用程序和部署添加新路由时，比如说（ http://www.something.com/child/childurl ），当用户直接打开这个 URL 时，它总是转到我提到的默认值 { path: '**', redirectTo: '/home', pathMatch: 'full' } ，它是 app.routing 中的 ( http://www.something.com/home )。模块.ts

所以问题是，每当我使用新路由部署 Angular PWA 应用程序并且用户直接访问 URL 时，它会将其重定向到 /home，然后用户会看到更新应用程序的通知，然后如果用户访问新路由，它就可以工作。但我想确保新 URL 可以立即使用

注意：仅当在 Angular 中启用 PWA 时才会发生这种情况

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'lazymodule',
    loadChildren: () => import('./modules/child/child.module').then((m) => m.ChildRoutingModule ),
  },
  { path: '**', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollOffset: [0, 0],
      initialNavigation: 'enabled',
      scrollPositionRestoration: 'top',
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

子延迟加载模块

child.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChildComponent } from 'src/app/components/child.component';

const routes: Routes = [
  {
    path: 'childurl',
    component: ChildComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ChildRoutingModule { }

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

app.component.ts

在这里，我向用户展示了更新应用程序的方法（如果有）

  ngOnInit(): void {

    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe((evt) => {
        this.snackBarService.displayNotification({
          message: 'New version of app is available!',
          action: 'Launch',
          force: true,
          callback: () => {
            this.windowRef.nativeWindow.location.reload(true);
          },
        } as SnackBarNotification);
      });

      this.swUpdate
        .checkForUpdate()
        .then(() => {})
        .catch((err) => {
          console.error('error when checking for update', err);
        });
    }
  }
4

1 回答 1

1

我在 PWA 上遇到了同样的问题，并为自己找到了一种解决方案。{ path: '**', redirectTo: '/home', pathMatch: 'full' }只需从您的 root中删除重定向app.routing.module.ts。

例如，创建一个组件 404 并将其用于路由**。在这种情况下，用户将在任何未知路由上看到 404 组件，但浏览器中的 url 不会改变。

在 404 组件中，我检查更新：

import { SwUpdate } from '@angular/service-worker';
...
constructor(private swUpdate: SwUpdate) {}
...
this.swUpdate.available.subscribe(() => {
   // here you can reload your page
   window.location.reload();
});

现在您的应用程序将重新加载，用户将看到新页面而不是 404 组件。

在我的应用程序上，我在检查更新时为用户添加了一些信息。您可以在methodist.io上查看它，尝试编写任何自定义路线。

于 2020-11-28T13:26:52.373 回答