1

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="./"/>

enter image description here

4
  • Add useHash: true in the routerModule See Explanation
    – Sameer
    May 15, 2021 at 15:20
  • Try adding feedback route inside a child route array of passgen May 15, 2021 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, 2021 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, 2021 at 15:54

2 Answers 2

3

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.

1
  • For nginx it is something like this: try_files $uri $uri/ /index.html =404;
    – Natalia C
    Apr 5, 2022 at 14:10
0

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: '' }      
]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.