Angular-Routing 在云中不起作用，但在 localhost

Question

我建立了一个包含几个组件的 Angular 网站。当使用ng serve 并在 localhost 上浏览时，路由工作得很好。但是当部署在云上时，只有起始页面在工作。路由到任何其他组件都不起作用，我收到错误： 404 Not Foundnginx/1.16.0.

我尝试使用 pathMatch: 'full' 等方法并创建一个启用 pushstate 的静态文件。

我也在使用<base href="/">。

应用路由模块：

const routes: Routes = [
  { path: '', component: IndexComponent, pathMatch : 'full'},
  { path: 'login', component: StartComponent, pathMatch : 'full'},
  { path: 'register', component: RegisterComponent, pathMatch: 'full'},
  { path: 'forgot', component: ServiceComponent, pathMatch: 'full'},
  { path: 'impressum', component: ImpComponent, pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [IndexComponent, StartComponent]

nginx 配置：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

我不明白为什么 localhost 和服务器端路由存在差异以及如何修复它。

Answer 1

提供者：[ {provide: LocationStrategy, useClass: HashLocationStrategy} ]

在 app.module.ts 中

Angular 定位策略在这里：https://angular.io/api/common/LocationStrategy 这是哈希策略。正如@WillAlexander 所说，服务器正在尝试处理路由，并试图根据路由在文件结构中定位文件，而不是让 Angular 处理路由。这是 Angular 初学者的常见问题，其他策略可以在我提供的链接以及此处找到：https://angular.io/guide/deployment。希望对您有所帮助。