Angular 角度PWA-在用户更新应用程序之前，新路由不起作用

目前，我有一个带PWA的Angular应用程序，每当我向我的应用程序添加一个新的路由，比如（）并部署时，当用户直接打开这个URL时，它总是转到默认的一个，我在app.routing.module.ts中提到了{path:'**'，redirectTo:'/home'，pathMatch:'full'}，它是（）

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

注意：只有在角度模式下启用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 {}

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 { }

子延迟加载模块

child.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 {}

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);
        });
    }
  }

---

我对PWA也有同样的问题，并为自己找到了一个解决方案。 只需从root

app.routing.module.ts

中删除重定向

{path:'**'，重定向到：'/home'，路径匹配：'full'}

例如，创建一个组件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组件

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