404 after login using HashLocation (# with en-US or fr) in prod

[sabrinaBinaa89]

Hi, I need your help, please
Actually, my project is running correctly in local (dev) but in prod I have 404 not found after login:
My objective is to redirect after login to https://domain.com/en-US/#/, I defined on the okta site, and in my code redirect uri = https://domain.com/login/callback
and I use:

   this.router.events.pipe(
  
    filter((e: Event | RouterEvent): e is RouterEvent => e instanceof RouterEvent && e instanceof NavigationStart) ,
       filter(() => this.oktaAuth.isLoginRedirect()),
       switchMap(() => defer(() => this.oktaAuth.handleLoginRedirect())),
      takeUntil(this.destroySub$)
    ).subscribe(() => {
 
  ....
    });

and I try to add

 this.router.navigate(['/'], { fragment: 'login/callback' }); 

to subscribe (but some problem)

 { path: 'login/callback', component: OktaCallbackComponent}
....
],
           { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' ,useHash: true})

Noted that I use :
“@okta/okta-angular”: “^6.4.0”,
“@okta/okta-auth-js”: “^7.8.0”,
angular 17
node 18.13.0
typseScript 5.2.2

someone can help me please to solve this problem

[alisaduncan]

Hi there @sabrinaBinaa89 ,

If your app works locally, but not on prod, I wonder if there’s a prod web server configuration change required. You may want to start with these resources from Angular:

Ensure web server configuration for SPA

Angular

(it looks like the new angular.dev resource doesn’t include examples so I’ll link to the older docs that do have specific config examples)

Angular

Support multiple languages in your deployment

Angular

Hope this helps!

[sabrinaBinaa89]

Thank you for your response. I updated the Nginx configuration, and it worked.