title: Deploy single page application Angular: 404 Not Found nginx
body: <p>I Have an Angular application. I run the command <code>ng build --prod --aot</code> to generate the <strong>dist</strong> folder.
  In the dist folder I created a file named <strong>Staticfile</strong> then I uploaded the dist folder to <a href="https://pivotal.io/" rel="noreferrer">pivotal.io</a> with the following commands:</p>
  
  <ol>
  <li>cf push name-app --no-start </li>
  <li>cf start name-app</li>
  </ol>
  
  <p>The app runs well. I have a nav bar, so when I change the path with navbar everything works fine. But when I do it manually (I enter the url myself) I have this error <strong>404 Not Found nginx</strong>.
  This my app.component.ts:</p>
  
  <pre><code>const appRoutes: Routes = [
    { path: 'time-picker', component: TimePickerComponent },
    { path: 'material-picker', component: MaterialPickerComponent },
    { path: 'about', component: AboutComponent },
    { path: 'login', component: LoginComponent },
    { path: 'registration', component: RegistrationComponent },
    {
      path: '',
      redirectTo: '/time-picker',
      pathMatch: 'full'
    }
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      TimePickerComponent,
      MaterialPickerComponent,
      DurationCardComponent,
      AboutComponent,
      LoginComponent,
      RegistrationComponent,
    ],
    imports: [RouterModule.forRoot(
      appRoutes
      // ,{ enableTracing: true } // &lt;-- debugging purposes only
    ),
      FormsModule,
      BrowserAnimationsModule,
      BrowserModule,
      MdCardModule, MdDatepickerModule, MdNativeDateModule, MdInputModule
  
    ],
    providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }],
    bootstrap: [AppComponent]
  })
  export class AppModule {
    constructor(private dateAdapter: DateAdapter&lt;Date&gt;) {
      this.dateAdapter.setLocale('fr-br');
    }
  }
  </code></pre>