'Nginx page not / 404 with Angular build bundle

Angular bundle work, but if i go to another page, for example /cards, nginx return 404. Why? Im using docker file for starting nginx, Angular app building with ./node_modules/@angular/cli/bin/ng.js build I will search response in google, but config edit isnt help

nginx.conf

server {
 listen 80;
 server_name localhost;
 root /usr/share/nginx/html;
 index index.html index.htm;
 location / {
  try_files $uri $uri/ /index.html;\n\
 }
}

app.module.ts

...imports...

const appRoutes: Routes =[
  { path: '', component: HomeComponent},
  { path: 'registration', component: RegistrationComponent},
  { path: 'login', component: LoginComponent},
  { path: 'cards', component: CardsComponent},
];


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    RegistrationComponent,
    LoginComponent,
    PreloaderComponent,
    CardsComponent,
    CardComponent,
    CardTextPipe,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dockerfile for building nginx

FROM nginx:latest
COPY . ./usr/share/nginx/html
RUN echo "server {\n\
 listen 80;\n\
 server_name localhost;\n\
 root /usr/share/nginx/html;\n\
 index index.html index.htm;\n\
 location / {\n\
  try_files $uri $uri/ /index.html;\n\
 }\n\
}" > /etc/nginx/conf.d/nginx.conf


Solution 1:[1]

Problem resolver, $uri in echo command like environments.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ishao