I have configured my Angular 19 routes according to the angular.dev and it works as expected on localhost. However once I build and deploy my app behaviour of redirecting with wildcard is not working anymore.

Once app is on localhost:4200 I can give it any not existing route like localhost:4200/abcdef and it will immediately redirect to /user. But after I deploy the app on server and type not existing route, default 404 page is displayed (instead of redirect).

Here is my setup from

app.routes.ts:

export const routes: Routes = [
    { path: 'user', component: UserComponent },
    { ... other components ...},
    { path: '', redirectTo: '/user', pathMatch:'full'},
    { path: '**', redirectTo: '/user', pathMatch:'full'}
];

I tried reordering of routes but that didn't solve the issue. I tried creating PageCotFoundComponent but this is not what I want longterm. I checked HAshLocationStrategy but this is not what I want longterm.

I have configured my Angular 19 routes according to the angular.dev and it works as expected on localhost. However once I build and deploy my app behaviour of redirecting with wildcard is not working anymore.

Once app is on localhost:4200 I can give it any not existing route like localhost:4200/abcdef and it will immediately redirect to /user. But after I deploy the app on server and type not existing route, default 404 page is displayed (instead of redirect).

Here is my setup from

app.routes.ts:

export const routes: Routes = [
    { path: 'user', component: UserComponent },
    { ... other components ...},
    { path: '', redirectTo: '/user', pathMatch:'full'},
    { path: '**', redirectTo: '/user', pathMatch:'full'}
];

I tried reordering of routes but that didn't solve the issue. I tried creating PageCotFoundComponent but this is not what I want longterm. I checked HAshLocationStrategy but this is not what I want longterm.

• angular
• http-redirect
• routes
• wildcard

2 Answers 2

To resolve the 404 errors, you need to configure your server to always return the index.html file for requests that don't match existing files or directories. This allows the Angular router to handle the route, regardless of whether it's a direct URL access or a refresh. There is more information about this in the docs: https://angular.dev/tools/cli/deployment#routed-apps-must-fall-back-to-indexhtml

Implementation Examples:

• Apache (.htaccess):

  <IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
  </IfModule>
  

  • This configuration uses the mod_rewrite module to redirect all requests that don't correspond to existing files or directories to index.html.

• Nginx (nginx.conf):

  location / {
    try_files $uri $uri/ /index.html;
  }
  

  • The try_files directive tells Nginx to first try serving the requested URI as a file or directory. If that fails, it falls back to serving index.html.

Thanks @Patryk, your comment helped me to think about one more step.

I am using Firestore as a database. During the firebase init hosting you need to change default settings.

ng build --configuration development
...
firebase init hosting
...
Configure as a single-page app (rewrite all urls to /index.html)?

Simplest way of solving the isse was to answer Yes to the above question during init.

Once I've answered "Y" firebase.json got updated with:

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

and it fixed the issue.