title: Angular Nginx Docker 404
body: <p>Been driving myself nuts trying to figure this out.</p>
  
  <p>I have a very simple Angular project with routing, below is the app.module.ts, nginx.conf and docker file.</p>
  
  <p>I start up by container</p>
  
  <pre><code>docker run --rm -d -p 80:80/tcp demo:latest
  </code></pre>
  
  <p>browse to <a href="http://localhost" rel="noreferrer">http://localhost</a> and site works all routes render</p>
  
  <p>If I am on <a href="http://localhost/contact" rel="noreferrer">http://localhost/contact</a> and refresh page or type Url in directly I get 404 from Nginx.</p>
  
  <p>The nginx.conf has try_files $uri /index.html; this is what all the posts with similar issues have said needs to be set.</p>
  
  <p>Any idea what I am doing wrong.</p>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  import { ContactComponent } from './contact/contact.component';
  import { AboutComponent } from './about/about.component';
  
  const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'about', component: AboutComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>nginx.conf</p>
  
  <pre><code>server {
      listen   80;
  
      root /usr/share/nginx/html;
      index index.html;
  
      server_name _;
  
      location / {
          try_files $uri /index.html;
      }
  }
  </code></pre>
  
  <p>dockerfile</p>
  
  <pre><code>FROM nginx
  
  COPY nginx.conf /etc/nginx/conf.d/
  
  RUN rm -rf /usr/share/nginx/html/*
  
  COPY ./dist /usr/share/nginx/html
  </code></pre>