1
votes

I am facing an issue related to angular routing on server. I use URL without having hash(#) symbol in it. Withhash: https://localhost:4200/#/activity-details/818659/false Withouthash: https://localhost:4200/activity-details/818659/false

Its works locally fine, but after deployment on node server it show me error 'Cannot GET /activity-details/818659/false'

with hash it work fine but i want to do this without hash in url.

without hash i am using: imports: [RouterModule.forRoot(routes)]

with hash i was using imports: [RouterModule.forRoot(routes),{usehash: true}],

Is it handle on server side? how? Is it handle in routing? how?

1

1 Answers

0
votes

According to Angular documentation:

Routed apps must fallback to index.html
If the app uses the Angular router, you must configure the server to return the application's host page (index.html) when asked for a file that it does not have.
A static server routinely returns index.html when it receives a request for http://www.example.com/. But it rejects http://www.example.com/heroes/42 and returns a 404 - Not Found error unless it is configured to return index.html instead.


If you run a fully static server, this generates an error, as the search page does not exist on the server. Using Express.js, for example, you can catch these requests and returns the index.html file.

app.post(...)
app.get(...)
app.use((req, res) => res.sendFile(path.join(__dirname, "public/index.html")))


Static servers cofigurations:

Nginx:

try_files $uri $uri/ /index.html;

Firebase Hosting:

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Apache:

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html