title: My Angular 6 routing returns 404 after page refresh behind Nginx proxy
body: <p>I have my <strong>angular</strong> app running inside <strong>docker</strong> that exposed on port 83, and I also have a <strong>spring-boot rest</strong> app inside another docker that exposed on port 8083.</p>
  
  <p>In the host server I have one Nginx server that reroute every requests using below config:</p>
  
  <pre><code>server {
      listen 80;
      server_name mydomain.com;
  
      location / {
          proxy_pass http://127.0.0.1:83;
      }
  }
  
  server {
      listen 80;
      server_name rest.mydomain.com;
  
      location / {
          proxy_pass http://127.0.0.1:8083;
      }
  }
  </code></pre>
  
  <p>With above config, every request that uses <strong>mydomain.com</strong> will goes to my Angular 6 app, and every request that uses <strong>rest.mydomain.com</strong> will goes to my spring-boot rest app.</p>
  
  <p>In the index page of my angular, I have a <strong>search form</strong> which will trigger the Routing module to open a <strong>search result page</strong>. </p>
  
  <p>My <strong>app-routing.module.ts</strong> is like below:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomePgComponent } from './home-pg/home-pg.component';
  import { ResultsPgComponent } from './results-pg/results-pg.component';
  
  const routes: Routes = [
    { path: "", component: HomePgComponent },
    { path: "search", component: ResultsPgComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(
      routes,
      { enableTracing: true }
    )],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule { }
  export const RoutingComponents = [
    HomePgComponent, 
    ResultsPgComponent
  ];
  </code></pre>
  
  <p>And the trigger on my <strong>search form</strong> is like below:</p>
  
  <pre><code>onSearchBtnClk(el) {
      if (el.value.length &gt; 0) {
        console.log("&gt;&gt;&gt; SEARCH ARGS = " + el.value);
        this.router.navigate(['/search'], { queryParams: { q: el.value }});
        this.newArgsEmitter.emit(el.value);
      }
  }
  </code></pre>
  
  <p>Everything works well, when I click the search button, my angular will open the <strong>search result page</strong> and shows the results.</p>
  
  <p>My problem is, whenever I click <strong>REFRESH</strong> button on the browser, instead of a search page result, it shows <strong>404 page</strong>. Why is this happen?</p>
  
  <p>Any advice would be appreciated.
  Thanks</p>