Angularjs NGINX反向代理背后的Angular应用程序和API

我有一个使用

RouterModule

的Angular 4应用程序。它由一台服务器提供服务，并在同一台机器上的不同端口上对另一台服务器进行API调用。为了解决跨源问题，我使用了NGINX反向代理，一切正常

问题是当我直接在浏览器中输入URL时-Angular应用程序的路由器没有被激活，我得到错误404

例如，如果我粘贴的应用程序没有加载，我得到404

以下是角度配置：

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent},
    { path: 'dashboard', component: DashboardComponent}
]
const routing: ModuleWithProviders = RouterModule.forRoot(routes);

@NgModule({
    imports: [
        routing,
        ...
    ],
    declarations: [AppComponent],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule { }

我使用服务于应用程序，使用另一个应用程序服务器（Tomcat）服务于API调用

服务器：

Server Type | Port  | Purpose
---------------------------------
http-server | 8081  | Angular App
tomcat      | 8080  | API

NGINX配置：

upstream my_api_server {
  server localhost:8080;
}

upstream my_angular_app {
  server localhost:8081;
}

server {
  listen 80 default_server;

  location /api {
    proxy_pass http://my_api_server/api;

    proxy_http_version 1.1;
    proxy_set_header Host               $host;
    proxy_set_header X-Real-IP          $remote_addr;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
  }

  location / {
    proxy_pass http://my_angular_app;

    proxy_http_version 1.1;
    proxy_set_header Host               $host;
    proxy_set_header X-Real-IP          $remote_addr;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_redirect off;
  }
}

那么，如何让NGINX接受

/dashboard

作为Angular应用程序的一部分呢

注意：我知道只要使用NGINX来服务Angular应用程序而不是http服务器，就可以轻松绕过这个问题，但这不是重点