Angular PWA - 在用户更新应用程序之前，新路线不起作用答案

【问题标题】：Angular PWA - New route is not working until users updates the applicationAngular PWA - 在用户更新应用程序之前，新路线不起作用
【发布时间】：2020-03-17 14:36:45
【问题描述】：

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

所以问题是，每当我使用新路由部署 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);
        });
    }
  }

【问题讨论】：

标签： angular progressive-web-apps angular-routing angular-pwa

【解决方案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(() => {
   // here you can reload your page
   window.location.reload();
});

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

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

【讨论】：