Service worker not working: "ChunkLoadError: Loading chunk 28 failed"

Question

I'm not sure what I'm doing wrong. I'm using Ionic 5 with Angular 11. I have a service worker ngsw-config.json and a webmanifest. What are the correct steps to take to make my web app work offline? To clarify, I don't need to make any calls to an external database. All my data is there. Everything around it just stops working when I go offline. The ui just stops responding whenever I go offline giving me a 'Loading chunk X error'

Other things I've checked:
-Preloading all modules in my app-routing.module.ts
-.htaccess file

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "Specto",
      "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)"
        ]
      }
    }
  ]
}

Webmanifest

{
  "name": "Specto",
  "short_name": "Specto",
  "theme_color": "#00B8E1",
  "background_color": "#F9F9F9",
  "display": "standalone",
  "scope": ".",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

Edit: I'm fairly certain my .htaccess messes it up. Need to figure out what to change about to make it work as my knowledge about .htaccess and apache servers is very limited.

.htaccess

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_URI} !^/sw\.js$ 
    RewriteRule ^ index.html [QSA,L]