Angular SSR – route identifier with dot

I have the following routerlink

<a [routerLink]="item['key']">{{item['name']}}</a>

This is my route:

{path: 'protocol/analysis/:id', component: ProAnalysisComponent},

When the user clicks on the link, he is directed to:

http://localhost:4200/protocol/analysis/filename.pdf

However, after updating my angular app to Angular 18 with SSR, that link stopped working because of the dot in the route identifier. I get the error message:

Failed to load resource: the server responded with a status of 404 (Not Found)

If I edit the URL to the following it works:

http://localhost:4200/protocol/analysis/"filename.pdf"

How do I fix this issue with the route identifier containing a dot?

>Solution :

If you’re using SSR, the issue might also be on the server side.

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

I am going to assume the pdf file is static which makes it easier, using this code

const express = require('express');
const path = require('path');
const app = express();

// Serve static files
app.use(express.static(path.join(__dirname, 'dist/your-app-name')));

// Wildcard route to handle all other requests
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

Let’s see if the dot is misinterpreted by the server

<a [routerLink]="['/protocol/analysis', item['key'].replace(/\./g, '%2E')]">{{item['name']}}</a>