title: Angular routing not working when deployed to tomcat 9 (Ubuntu 18.04)
body: <p>I coded an angular project on my own PC, everything worked fine when I ran it locally with the command <code>ng serve</code>. Now I want to deploy it on tomcat on a VM (provided by my school) because my project needs to be public. </p>
  
  <p>I created a git repository and downloaded the angular project on the VM. Followed a tutorial to deploy the app in tomcat, which simply consisted of 2 steps:</p>
  
  <ol>
  <li>Run <code>ng build --base-href=/angular/</code> to generate some files</li>
  <li>Copy the generated files to tomcat's <code>/webapps</code> subfolder</li>
  </ol>
  
  <p>But it does not work as intended. To me it seems like there's an issue with routing.</p>
  
  <p>Here's my routing module:</p>
  
  <pre><code>const appRoutes: Routes = [
    {path: 'coachPortal', component: CoachPortalComponent},
    {path: 'userPortal', component: UserPortalComponent},
    {path: 'users', component: UsersComponent},
    {path: 'userDetails/:id', component: UserDetailsComponent},
    {path: 'mySessions', component: MySessionsComponent},
    {path: '', redirectTo: '/coachPortal', pathMatch: 'full'},
    {path: '**', component: CoachPortalComponent}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>To navigate between routes, I use this old simple code: <code>window.location.href = '/users';</code><br/>
  This worked like a charm when I ran it locally on my pc. </p>
  
  <p>But I'm guessing the reason why it's not working anymore after deploying on tomcat is because tomcat adds the prefix <code>angular/</code>.<br/>
  When running locally on my pc the urls were <code>localhost:4200/{componenturl}</code>.<br/>
  But on the VM it's <code>x.x.x.x:8080/angular/{componenturl}</code></p>
  
  <p>But because of the routing redirects I am getting 404 errors. When I first visit the root url <code>x.x.x.x:8080/angular</code>, it matches with the rule <code>{path: '', redirectTo: '/coachPortal', pathMatch: 'full'}</code>. and loads the coachPortal component and <strong>even changes</strong> the url to <code>angular/coachPortal</code>. But refreshing the page or manually entering <code>angular/coachPortal</code> gives a 404 error. And all other links don't work either.</p>
  
  <p>Also on the coachPortal I have an image with src <code>../../../assets/logo.png</code> and it obviously doesn't load because of how the generated files in webapps folder have different folder structure... How can I fix this? The image is directly under assets folder.</p>