fix: serviceworker doesnt intercept other urls

angular.json

@@ -30,8 +30,7 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              },
-              "src/sw.js"
+              }
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",

ngsw-config.json

@@ -25,6 +25,14 @@
           "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
         ]
       }
+    },
+    {
+      "name": "excluded-redirects",
+      "installMode": "lazy",
+      "updateMode": "lazy",
+      "resources": {
+        "urls": [ "/**" ]
+      }
     }
   ]
 }

src/app/app.component.html

@@ -1,3 +1,8 @@
+<style>
+  *{
+    text-align: center;
+  }
+</style>
 <main class="main">
   <div class="row justify-content-md-center">
     <h1>Please select the number of teams:</h1>
@@ -35,7 +40,7 @@
   <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
   </form>
 
-  <table class="table table-striped custom-table">
+  <table class="table table-striped">
     <thead>
       <tr>
         <th scope="col">Size</th>
@@ -45,8 +50,8 @@
     <tbody>
       @for (team of teamsArray; track $index) {
         <tr>
-          <td style="text-wrap: wrap;">{{ team.length | number }}</td>
-          <td class="wrap-cell">{{ team }}</td>
+          <td>{{ team.length | number }}</td>
+          <td>{{ team }}</td>
         </tr>
       }
     </tbody>

src/app/app.component.less

@@ -1,11 +0,0 @@
-*{
-    text-align: center;
-}
-.custom-table {
-    //table-layout: fixed;
-    width: 100%; /* Or a specific max-width */
-}
-.wrap-cell{
-    word-break: break-word;
-    white-space: normal;
-}

src/app/app.component.ts

@@ -23,7 +23,7 @@ export class AppComponent implements OnInit {
   constructor(private activatedRoute: ActivatedRoute){}
 
   ngOnInit(): void {
-    //TODO consider using Angular's ActivatedRoute here instead
+    //consiedr using Angular's ActivatedRoute here instead
     const params = new URLSearchParams(window.location.search);
     const names = params.get('names')?.replaceAll(',', '\n');
     if (names) this.playerNamesValue = names;

src/app/app.config.ts

@@ -7,8 +7,10 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy
 import { provideServiceWorker } from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'), provideServiceWorker('./sw.js', {
-            enabled: !isDevMode(),
-            registrationStrategy: 'registerWhenStable:30000'
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),
+              provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'),
+              provideServiceWorker('ngsw-worker.js', {
+                enabled: !isDevMode(),
+                registrationStrategy: 'registerWhenStable:30000'
           })]
 };

src/sw.js

@@ -1,12 +0,0 @@
-self.addEventListener('fetch', event => {
-    if (event && 
-        event.request && 
-        event.request.url && 
-        // check if basename includes a dot, i.e. if it is not a file
-        ! event.request.url.split(/[\\/]/).pop().includes(".")
-    ) {
-      event.stopImmediatePropagation();
-    }
-  });
-  
-  self.importScripts('./ngsw-worker.js');