html - Angular-Routing 在云中不起作用，但在本地主机上

Question

我用几个组件建立了一个 Angular 网站。使用 ng serve 时并在本地主机上浏览，路由工作正常。但是当部署在云端时，只有起始页面在工作。路由到任何其他组件都不起作用，我收到错误消息: 404 Not Found nginx/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;
        }
    }
}

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

Answer 1

providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy} ]

在 app.module.ts 中

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