Angular PWA - новый маршрут не работает, пока пользователи не обновят приложение - PullRequest
Новая
       97

Angular PWA - новый маршрут не работает, пока пользователи не обновят приложение

0 голосов
/ 17 марта 2020

В настоящее время у меня есть приложение Angular с PWA, и всякий раз, когда я добавляю новый маршрут, скажем (http://www.something.com/child/childurl) к моему приложению и разверну, и когда пользователи непосредственно открывают этот URL , он всегда идет по умолчанию, где я упомянул {path: '**', redirectTo: '/ home', pathMatch: 'full'}, который (http://www.something.com/home) в app.routing.module .ts

Таким образом, проблема заключается в том, что всякий раз, когда я развертываю Angular приложение PWA с новым маршрутом и пользователь обращается к URL-адресу напрямую, оно перенаправляет его в / home, а затем пользователь видит уведомление об обновлении приложения и тогда, если пользователи получают доступ к новому маршруту, он работает. Но я хотел убедиться, что новый URL-адрес должен работать сразу

ПРИМЕЧАНИЕ. Это происходит, только если PWA включен в Angular

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