Nginx Angular上的404未找到错误：8.0.2路由

Question

我遇到一个问题，当我尝试访问mywebsiteurl/radar-input或时mywebsiteurl/daily-submissions，出现404 Not Found错误，当我不使用路由方法时，可以确认相应的组件加载正常，以下是我的问题app-routing.module.ts

我使用以下命令生成静态文件并创建一个空.nginx文件，并将这些静态文件托管在Nginx服务器上

ng build --prod --outputPath=/<current working directory>/www

谁能提供有关如何调试和修复它的指南？

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { RadarInputComponent } from "./radar-input/radar-input.component";
import { LatestSubmittedProjectPageComponent } from './latest-submitted-project-page/latest-submitted-project-page.component';

const appRoutes: Routes = [
  { path: 'radar-input', component: RadarInputComponent },
  { path: 'daily-submissions', component: LatestSubmittedProjectPageComponent },
  {
    path: 'radar-input',
    component: RadarInputComponent,
    data: { title: 'Radar List' }
  },
  { path: '',
    redirectTo: '/radar-input',
    pathMatch: 'full'
  },
  { path: '**', component: RadarInputComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(
    appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

UPDATE1：

我查看了404 Not Found nginx角路由并创建了一个Staticfile＆我添加了这行pushstate: enabled仍然NOT对我有用

UPDATE2：

我尝试如下创建nginx.conf文件，但仍然收到错误

server {
    root /www;

    location / {
    }

    location /daily-submissions/ {
        index index.html
    }
}

www文件夹内容：

drwxr-xr-x  23 username  staff     736 Aug 19 13:59 ..
-rw-r--r--   1 username  staff    1440 Aug 19 13:59 runtime-es5.741402d1d47331ce975c.js
-rw-r--r--   1 username  staff  770212 Aug 19 13:59 main-es5.ded1413a886662a5ad02.js
-rw-r--r--   1 username  staff  113549 Aug 19 13:59 polyfills-es5.405730e5ac8f727bd7d7.js
-rw-r--r--   1 username  staff   14707 Aug 19 14:00 3rdpartylicenses.txt
-rw-r--r--   1 username  staff   28136 Aug 19 14:00 overlay.2663ca4a577f280aa709.png
-rw-r--r--   1 username  staff   50408 Aug 19 14:00 banner.6f97727962128487d41a.jpg
-rw-r--r--   1 username  staff    1440 Aug 19 14:00 runtime-es2015.858f8dd898b75fe86926.js
-rw-r--r--   1 username  staff  683152 Aug 19 14:00 main-es2015.81b9cbd6a9d33d23040d.js
-rw-r--r--   1 username  staff   37304 Aug 19 14:00 polyfills-es2015.5728f680576ca47e99fe.js
-rw-r--r--   1 username  staff  105076 Aug 19 14:00 styles.64346455fc558cf71e6a.css
-rw-r--r--   1 username  staff    5430 Aug 19 14:00 favicon.ico
drwxr-xr-x  14 username  staff     448 Aug 19 14:00 .
-rw-r--r--   1 username  staff    1050 Aug 19 14:00 index.html

Answer 1

我希望你确切地知道问题是什么。此问题发生在 SPA（单页应用程序）中。您键入的 url 会明智地查找页面目录/文件。如果你去让我们说它mywebsiteurl/radar-input会寻找 file radar-input。在 SPA 中只有一个文件，index.html所以它不会找到该radar-input文件并抛出 404。

SPA 有他们所有的逻辑，在 index.html 中路由，一旦它被提供，它就会为你处理一切（非 SPA 的情况不是这样），所以如果你去mywebsiteurl/它会工作正常，所有的 url 将通过应用程序路由加载原因是 mywebsiteurl/它将查找index.html文件并找到它并提供它。因此，如果您的网站通过访问基本 url 工作正常意味着您的静态文件位于正确的目录中，您只需将其添加到 nginx.conf

location / {
try_files  $uri /index.html;        #check if uri exists else serve index.html as rewrite
}

它基本上尝试首先在 url 中找到文件，如果它不存在，它将为 index.html 提供服务。

Answer 2

我认为您的 nginx 配置有问题，请检查error.log（应该是/var/log/nginx）。

由于您不在#客户端路由中使用 hash ()，因此请try_file在 nginx 配置中使用。

这是我的 nginx 配置流程，它与 Angular 应用程序完美配合。

location /myapp/ {
    alias /myapp/;
    index index.html index.htm;
    add_header Cache-Control no-cache;
    gzip_static on;
    try_files $uri /myapp/index.html;
}