部署单页应用 Angular: 404 Not Found nginx

Question

我有一个 Angular 应用程序。我运行命令ng build --prod --aot 来生成 dist 文件夹。 在 dist 文件夹中，我创建了一个名为 Staticfile 的文件，然后我使用以下命令将 dist 文件夹上传到 pivotal.io：

1. cf push name-app --no-start
2. cf start name-app

应用程序运行良好。我有一个导航栏，所以当我使用导航栏更改路径时，一切正常。但是当我手动操作时（我自己输入 url）我有这个错误404 Not Found nginx。 这是我的 app.component.ts：

const appRoutes: Routes = [
  { path: 'time-picker', component: TimePickerComponent },
  { path: 'material-picker', component: MaterialPickerComponent },
  { path: 'about', component: AboutComponent },
  { path: 'login', component: LoginComponent },
  { path: 'registration', component: RegistrationComponent },
  {
    path: '',
    redirectTo: '/time-picker',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [
    AppComponent,
    TimePickerComponent,
    MaterialPickerComponent,
    DurationCardComponent,
    AboutComponent,
    LoginComponent,
    RegistrationComponent,
  ],
  imports: [RouterModule.forRoot(
    appRoutes
    // ,{ enableTracing: true } // <-- debugging purposes only
  ),
    FormsModule,
    BrowserAnimationsModule,
    BrowserModule,
    MdCardModule, MdDatepickerModule, MdNativeDateModule, MdInputModule

  ],
  providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('fr-br');
  }
}

Answer 1

我假设您的/dist 目录的所有数据现在都在/var/www/your-domain/ 中，如果不是，请先粘贴到那里

现在您的网址仅被接受主页或登录页面，否则它们会显示 404 错误。

在这种情况下找到你的ngnix的/default文件，在Linux路径中/etc/nginx/sites-available/default，在这个文件中，你会看到这样的

try_files $uri $uri/ =404

替换为

try_files $uri $uri/ /index.html;

现在您在 linux 中使用命令重新启动您的 ngnix 服务器

sudo systemctl restart nginx

查看 ngnix 的状态

sudo systemctl status nginx

Answer 2

这实际上是一个 nginx 配置问题，需要解决这个问题。

在你的 nginx.conf 文件中尝试使用：

try_files $uri $uri/ /index.html;

代替：

try_files $uri $uri/ =404;

那么之后还需要更改以下内容。

来自：

 error_page 404 index.html;

到

error_page 404 /actualPathToDistFolder/index.html;

Answer 3

我终于找到了答案： 在我生成 dist 文件夹之后。

• 我创建了一个名为 Staticfile 的文件并将其放在 dist 文件夹中
• 我打开 Staticfile 并添加了这一行 pushstate: enabled

pushstate 启用可让浏览器可见的 URL 保持干净，以便为提供多个路由的客户端 JavaScript 应用程序提供服务。例如，pushstate 路由允许单个 JavaScript 文件路由到多个带有锚标记的 URL，这些 URL 看起来像 /some/path1 而不是 /some#path1。

Answer 4

对我来说这是一个权限问题，Nginx 必须是您放置 dist 的目录的所有者，我在 nginx 日志文件中看到了这个错误

"root/../../dist/index.html" failed (13: Permission denied)

所以我在包含我的 dist 的顶级文件夹中授予 nginx 用户权限

chown nginx . -R //  to give nginx the permissions on the current directory, and everything in it.

然后你必须重新启动 nginx

sudo systemctl restart nginx

它应该可以工作！

Answer 5

在您的nginx.conf 文件中尝试使用：

try_files $uri $uri/ /index.html;

代替：

try_files $uri $uri/ =404;

这在 Angular 5 项目中对我有用。

Answer 6

对于那些不使用 Staticfile 的人可能想试试这个。

我在使用 nginx 服务 Angular 时遇到了同样的问题。 以下是默认配置文件，可能在 /etc/nginx/sites-available/yoursite 中的某处找到

     location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri $uri/ =404;
    }

但我们真正想要的是……

     location / {
            # First attempt to serve request as file, then
            # as directory, then redirect to index(angular) if no file found.
            try_files $uri $uri/ /index.html;
    }

Answer 7

这是服务器端的问题，而不是 Angular 端的问题。在您的案例nginx 中，为每个请求返回索引或登录页面是服务器的责任。

更新

如果您无论如何都没有可以配置的后端或服务器，则有两种解决方法。

• 在 Angular 中使用 HashLocationStrategy
• 对 index.html 文件进行一些调整 link 否 -15

Answer 8

Angular 应用程序是单页应用程序。当您手动键入地址时，您会尝试路由到应用程序未运行的位置。

您需要编辑 nginx 配置以路由到您的基本页面。