Why is my Angular routing module not working with parameters? – Apache

I have the following routing-module:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'x', component: xComponent},
  { path: 'x-d/:mid', component: xdComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

When I go in the browser directly into mywebsite/x it works perfectly, however, if I go to mywebsite/x-d/5 (any id should work here) it gets me an error 404.

I already configured my apache to fallback to index.html so Angular handles everything in the front end, however, a route with a parameter is not loading properly.

I included my .htaccess file with my fallback config below, it’s the standard on Angular Documentation for 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