Angular 9 - Routing doesnt work when deployed to a web Server

Question

I have following route in app-routing.module.ts:

const routes: Routes = [
  { path: 'component1', component: Component1},
  { path: 'component2', component: Component2},
];

When I run the application locally from localhost:4200, the routing takes place as expected.

When I deploy the same application in a tomcat server with a base path as below:

(http://localhost:4200) is now equivalent to (http:development.project.azure.com/project)

When I hit the above server url, my application is loading fine. But when I try to navigate to other components I get 404.

I believe the root cause of this should be the extra base path (/project) due to which (/project/component1) is not matching the (/component1) defined in my route and I get 404.

I tried to change the route as (/project/component1) but still didnt work.

How do I achieve routing when I have a base path in my url.

your webserver does not know about your client side routing. easy fix: redirect 404 to index (not pretty, but works). and add a --base-href to your build process. — Markus Dresch, Dec 08 '20 at 14:32
@MarkusDresch, Thanks for your answer. Could you please share a sample that does the redirection. Where should I add the redirection? — code-geek, Dec 08 '20 at 14:36
that very much depends on the webserver you are running. for apache, google ".htaccess angular" maybe also with "PathLocationStrategy". you have to tell the webserver, that your route does not actually exist, it's only on the client. — Markus Dresch, Dec 08 '20 at 14:38
Does this answer your question? [Url rewriting Angular 4 on tomcat 8 server](https://stackoverflow.com/questions/51042875/url-rewriting-angular-4-on-tomcat-8-server) — Markus Dresch, Dec 08 '20 at 14:45

Petr Savelev · Answer 1 · 2022-11-29T18:34:44.143

This service worked for me: https://julianpoemp.github.io/ngx-htaccess-generator/#/generator All you need is to create .htaccess file on your '/www' folder on web server with the generated content from above.

I use the following config and it works fine for me:

.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  # Redirect all non-file routes to index.html
  RewriteRule ^(?!.*\.).*$ index.html [NC,L]
</IfModule>

# Disable browser caching for all files that don't get a hash string by Angular.
<FilesMatch "^(?!.*\.([0-9a-z]{20})\.).*$">
  <IfModule mod_headers.c>
    FileETag None
    Header unset ETag
    Header unset Pragma
    Header unset Cache-Control
    Header unset Last-Modified
    Header set Pragma "no-cache"
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Expires "Mon, 1 Jan 1900 00:00:00 GMT"
  </IfModule>

</FilesMatch>

Angular 9 - Routing doesnt work when deployed to a web Server

1 Answers1