Angular 11 throws 404 error when hitting url directly instead of navigating through app

Question

I am trying to learn Angular and I have created a simple web application. I build the application using

ng build --prod

and has deployed it in the tomcat server.

The application gives 404 error whenever I try to hit any url directly other than the home url. (The application is completely frontend and there is no backend involved)

Home page url - http://54.160.203.76:8080/passgen/ - this loads perfectly fine.

Other Url - http://54.160.203.76:8080/passgen/feedback - this gives 404 error.

//routes array

const routes: Routes = [
  { path: '', component: PassgenComponent },
  { path: 'passphrase', component: PassphraseComponent },
  { path: 'strength', component: PassStrengthComponent },
  { path: 'feedback', component: FeedbackComponent },
  { path: '**', redirectTo: '' },
];


// code snippet to use the routes

 <div class="nav-links">
    <div routerLink="" (click)="navSlide()">Password</div>
    <div routerLink="strength" (click)="navSlide()">PassStrength</div>
    <div routerLink="passphrase" (click)="navSlide()">Passphrase</div>
    <div routerLink="feedback" (click)="navSlide()">Feedback</div>
  </div>


//index html base href

 <base href="./"/>

Add `useHash: true` in the `routerModule` [See Explanation](https://stackoverflow.com/a/52417120/11719787) — Sameer, May 15 '21 at 15:20
Try adding `feedback` route inside a child route array of `passgen` — Mir entafaz Ali, May 15 '21 at 15:32
@Sameer I went through the explanation and did understood the problem; but using `#` in a production application will not look weird? — Shail, May 15 '21 at 15:39
@MirentafazAli I did added it in child route but after adding it stopped working completely and wont even change using the app `const routes: Routes = [ { path: '', component: PassgenComponent, children: [ { path: 'passphrase', component: PassphraseComponent }, { path: 'strength', component: PassStrengthComponent }, { path: 'feedback', component: FeedbackComponent }, ], }, { path: '**', redirectTo: '' }, ];` — Shail, May 15 '21 at 15:54

score 3 · Answer 1 · answered May 15 '21 at 16:23

You'll have to configure your tomcat to request index.html on every route change.

For this, add RewriteValve in /opt/tomcat/latest/conf/context.xml (path may or may not be different in your case).

In your project folder, create WEB-INF folder, then add a file rewrite.config in WEB-INF with below content:-

RewriteCond %{REQUEST_URI} !^.*\.(bmp|css|gif|htc|html?|ico|jpe?g|js|pdf|png|swf|txt|xml|svg|eot|woff|woff2|ttf|map)$
RewriteRule ^(.*)$ /index.html [L]

After this, restart your tomcat server.

For nginx it is something like this: try_files $uri $uri/ /index.html =404; — Natalia C, Apr 05 '22 at 14:10

score 0 · Answer 2 · answered May 15 '21 at 17:16

Please use the routing like this

const routes: Routes = [
  { path: '', component: PassgenComponent,
    children: [
      {
       path: 'feedback', // child route path
       component: FeedbackComponent, // child route component that the router renders
      }
    ]
   },       
   { path: 'passphrase', component: PassphraseComponent },
   { path: 'strength', component: PassStrengthComponent },     
   { path: '**', redirectTo: '' }      
]

Angular 11 throws 404 error when hitting url directly instead of navigating through app

2 Answers2