Refreshing the page or entering the URL in browser redirects to home page angular 7

Question

I am working on angular 7 application. When i navigate the page from one to another using routerlink option, it is working fine.

 <a class="dropdown-item pt-3 pb-3 border-bottom" routerLink="/proposals">Proposals</a>

 <a class="dropdown-item pt-3 pb-3 border-bottom" routerLink="/datapartners">Data Partners</a>

it will redirect to specific page and render the corresponding component. but when i refresh the page / enters the different URL in browser, automatically it will direct to home page for all the cases. that means routing working fine via router link not through browser URL.

It is working fine in all the cases for local environment.the issue happening only in deployed server.

https://localhost:4200/proposals  - working fine in all the cases locally.

https://x.com/app/proposals  - working only via router link  not through browser URL.

I had tried to set the basehref="/app/" attribute in index.html but no luck.

Below is the routing component code snippet.

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home', // Core Framework will handle this route path - /login. If there's any change App Team can update accordingly!
    pathMatch: 'full',
    canActivate: [LoginGuard]
   },



  {
    path: 'proposals',
    component: ProposalsComponent,
    runGuardsAndResolvers: 'always',
    //pathMatch: 'full',
    //  canActivate: [EMSGuard],
    canActivate: [LoginGuard]
  },
  {
    path: 'about',
    component: AboutComponent,
    pathMatch: 'full',
    //  canActivate: [EMSGuard],
    canActivate: [LoginGuard]
  },
  {
    path: 'home',
    component: HomeComponent,
    pathMatch: 'full',
    //  canActivate: [EMSGuard],
    canActivate: [LoginGuard]
  },
  {
    path: 'whatisnew',
    component: WhatisnewComponent,
    pathMatch: 'full',
    //  canActivate: [EMSGuard],
    canActivate: [LoginGuard]
  },



  {
    path: 'datapartners',
    component: DatapartnersComponent,
    pathMatch: 'full',
    //  canActivate: [EMSGuard],
    canActivate: [LoginGuard]
  },






  // #route4: wild card route
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

Try to use LocationStrategy

providers: [{
   provide: LocationStrategy, 
   useClass: HashLocationStrategy
}]

Angular 7 - Browser Refresh always redirecting to homepage

Answer 2

This need to be at the bottom of the array, since it works on first match principal

{
    path: '',
    redirectTo: 'home', // Core Framework will handle this route path - /login. If there's any change App Team can update accordingly!
    pathMatch: 'full',
    canActivate: [LoginGuard]
   },