Fix playground 404 error by enabling hash-based routing #155
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
The playground at http://nodeefficientnet.ml/ was returning 404 errors, making it inaccessible to users as reported in the issue.
Root Cause
The Angular application was using HTML5 pushState routing mode (Angular's default configuration). This routing mode requires server-side configuration to properly handle direct navigation to routes and page refreshes in Single Page Applications (SPAs). Without proper configuration, users would encounter 404 errors when:
http://example.com/some-route
)While the nginx configuration included a
try_files
directive, hash-based routing provides a more robust solution that works across various hosting scenarios without complex server-side setup.Solution
This PR enables hash-based routing in the Angular application by adding the
useHash: true
option to the RouterModule configuration:How It Works
Hash-based routing uses URL fragments (the part after
#
) to handle navigation:http://nodeefficientnet.ml/route
→ Results in 404 errorhttp://nodeefficientnet.ml/#/route
→ Works correctlyThe hash fragment is never sent to the server and is processed entirely client-side by Angular's router. This means:
index.html
regardless of the URL pathChanges Made
playground/ui/src/app/app-routing.module.ts
to enable hash-based routing (1 line changed)playground/ui/package-lock.json
(generated during testing)Testing
useHash: true
is present in compiled outputDeployment
The fix will take effect when the playground is rebuilt and redeployed using the existing deployment process (
docker-compose up --build
).Fixes the 404 issue reported in the original issue.
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
accounts.google.com
/opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3663 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-87850769 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,12032611389325033257,17712737730482572429,262144 --disable-features=PaintHolding --variations-seed-version
(dns block)/opt/google/chrome/chrome --user-data-dir=/tmp/karma-87850769 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=87850769
(dns block)clients2.google.com
/opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3663 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-87850769 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,12032611389325033257,17712737730482572429,262144 --disable-features=PaintHolding --variations-seed-version
(dns block)/opt/google/chrome/chrome --user-data-dir=/tmp/karma-87850769 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=87850769
(dns block)clientservices.googleapis.com
/opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3663 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-87850769 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,12032611389325033257,17712737730482572429,262144 --disable-features=PaintHolding --variations-seed-version
(dns block)/opt/google/chrome/chrome --user-data-dir=/tmp/karma-87850769 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=87850769
(dns block)fonts.googleapis.com
ng build --configuration=production
(dns block)redirector.gvt1.com
/opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3663 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-87850769 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,12032611389325033257,17712737730482572429,262144 --disable-features=PaintHolding --variations-seed-version
(dns block)/opt/google/chrome/chrome --user-data-dir=/tmp/karma-87850769 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=87850769
(dns block)safebrowsingohttpgateway.googleapis.com
/opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3663 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-87850769 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,12032611389325033257,17712737730482572429,262144 --disable-features=PaintHolding --variations-seed-version
(dns block)/opt/google/chrome/chrome --user-data-dir=/tmp/karma-87850769 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=87850769
(dns block)www.google.com
/opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3663 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-87850769 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,12032611389325033257,17712737730482572429,262144 --disable-features=PaintHolding --variations-seed-version
(dns block)/opt/google/chrome/chrome --user-data-dir=/tmp/karma-87850769 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=87850769
(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.