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

Question

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

cf push name-app --no-start
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

Angular 应用程序是单页应用程序。当您手动键入地址时，您尝试路由到应用程序不是运行.

的位置

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

Answer 2

这是服务器端的问题，而不是 Angular 端的问题。服务器负责 return 您的每个请求的索引或登录页面 nginx。

更新

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

在Angular

HashLocationStrategy

在 index.html 文件中进行一些调整 link 否 -15

Answer 3

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

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

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

Answer 4

对于那些不使用 静态文件 的人可能想试试这个。

我在使用 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 5

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

try_files $uri $uri/ /index.html;

而不是：

try_files $uri $uri/ =404;

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

Answer 6

对我来说这是一个权限问题，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 7

这实际上是一个 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 8

我假设你的 /dist 目录的所有数据现在都在 /var/www/your-domain/ 中，如果没有则先粘贴到那个

现在您的 url 仅接受主页或登陆页面，否则它们会显示 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

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

Deploy single page application Angular: 404 Not Found nginx

nginx

cloud-foundry

single-page-application

angular-routing

angular