Parameter routing and condition dont work on production mode

I have a simple routing like this:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{
    path: 'scenario',
    loadChildren: () => import('./pages/scenarios/scenario/scenario.module').then( m => m.ScenarioPageModule)
  }
 ]

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then in app.component.ts

    export class AppComponent  {
    
    {
        this.initializeApp();
    }
    
      initializeApp() {
    
            //Get urlParameter
            this.getParameter()
    
              if(this.source == "kiosk"){
    
               //go to route
               this.navController.navigateRoot('scenario');
             }
           }


getParameter() {
    if (document.URL.indexOf("?") > 0) {
      let splitURL = document.URL.split("?");
      let splitParams = splitURL[1].split("&");
      let i: any;
      for (i in splitParams){
        let singleURLParam = splitParams[i].split('=');
        console.log(singleURLParam[1])
        if (singleURLParam[0] == "utm_source"){
          this.source = singleURLParam[1];
        }
      }
    }
  }
}

As you can see I read the URL parameter and if it equals "Kiosk" it redirects to scenario page. So if I run the project on localhost and try with this URL: http://localhost:8100/scenario/?utm_source=kiosk it works, it redirects to scenario and do everything well.

The problem starts when I publish on production, the URL I tried is: myapp.company.com/scenario/?utm_source=kiosk it just return 404 - file directory not found

Any help is appreciated, thanks

Solution

The Angular web server acts as a reverse proxy which behaves like this:

If the incoming requests matches a asset file (CSS, JS, image, ...), serve it
Otherwise, serve the index.html file in order to execute the JavaScript code in the browser

When the index.html is being served and the JavaScript executes, the current URL is treated like an Angular route and the corresponding layout/component is displayed.

Wherever you are trying to deploy, it should have URL rewriting abilities and you should configure it in order to mimic Angular's development server behavior.

Here are some useful resources for the three most popular web servers: