When refreshing on anything but the root page (when in GH pages) redi…

…rects to GH 404 - fix that

.github/workflows/deployment.yml

@@ -2,7 +2,7 @@ name: Build and Deploy
 on:
   push:
     branches:
-      - master
+      [fix-bug-refresh-redirects-to-github-404]
 permissions:
   contents: write
 concurrency:

package.json

@@ -5,7 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "build:gh-pages": "ng build --base-href /team-app/",
+    "build:gh-pages": "ng build --base-href /team-app/ && node scripts/afterBuild.js",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },

scripts/afterBuild.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+
+// because GH pages doesn't support SPA routing, we need to redirect all 404s to the root
+const distPath = path.join(__dirname, '../dist/team-app');
+const indexPath = path.join(distPath, 'index.html');
+const notFoundPath = path.join(distPath, '404.html');
+
+fs.copyFileSync(indexPath, notFoundPath);
+
+const redirectScript = `
+<script>
+  if (location.pathname !== "/") {
+    location.replace('/#' + location.pathname);
+  }
+</script>
+</body>`;
+
+let htmlContent = fs.readFileSync(notFoundPath, 'utf8');
+
+// Replace the closing body tag with the script followed by the closing body tag
+htmlContent = htmlContent.replace('</body>', redirectScript);
+
+fs.writeFileSync(notFoundPath, htmlContent);