部署单页应用Angular：404未找到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（自己输入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');
  }
}

- Melchia

---

请按照此https://dev59.com/-1sW5IYBdhLWcg3wM0uF#40833154的步骤更新您的nginx配置文件。 - Brilliant-DucN

Answer 1

对于不使用 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;
    }

- Sven Dhaens

---

是的，你说得对。这种方法也可以工作。但在我的情况下，我使用的是PWS，它是一种PaaS，所以它不能工作。不过还是要点赞，因为它可能会帮助未来的人们。 - Melchia

嗨，我真的很困惑如何实际进入我的React应用程序的/etc/nginx/sites-available/yoursite。请帮忙。 - John

@John 请阅读 http://nginx.org/en/docs/windows.html。 - Sven Dhaens

你在“/index.html”前面加上“/”救了我。 - Chgad

你救了我的夜晚！现在我可以去睡觉，抱着我的妻子和孩子了！ - adnako

Answer 2

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

try_files $uri $uri/ /index.html;

改为：

try_files $uri $uri/ =404;

在 Angular 5 项目中，这对我有效。

- Mad Javad

---

这正是@Marko Letic所说的。这个答案有什么不同？ - Paulo Guimarães

如果有人尝试此解决方案但没有成功，请检查您的 nginx.conf 文件是否遗漏了添加 index.html 文件的 root /dist。这就是我的问题，我忘记添加 root /pathofmydist。 - Bryan Lim

Answer 3

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

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

启用Pushstate可以让客户端JavaScript应用程序服务于多个路由，同时保持浏览器可见的URL干净。例如，推送状态路由允许单个JavaScript文件路由到多个看起来像/some/path1而不是/some#path1的锚点URL。

- Melchia

---

我遇到了完全相同的问题，但这对我没有起作用，有什么想法我可能漏掉了什么？我正在使用Angular8。 - carte blanche

Answer 4

我假设你所有的 /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中使用命令重新启动NGINX服务器

sudo systemctl restart nginx

使用以下命令查看 Nginx 的状态：

sudo systemctl status nginx

- rajkanani

Answer 5

这是服务器端的问题，与Angular无关。在你的情况下，它是服务器的责任来返回索引或着陆页，例如nginx。

更新：

如果您没有后端或服务器可以配置，则有两种解决方法：

- 在Angular中使用HashLocationStrategy - 在index.html文件中进行一些调整，这里是一个链接：link No -15

- Rahul Singh

---

我已经告诉您，先生，我所做的只是创建一个Angular应用程序。我在后端没有做任何工作。 - Melchia

我不明白，我访问了你的网站，什么也没有。 - Melchia

我访问了这个网址https://rahulrsingh09.github.io/AngularConcepts/home#collapse15 - Melchia

@Melchia，这就是我所说的解决方案，它适用于ghpages以及这种情况。我希望... - Rahul Singh

不，你说的问题不同。当我刷新页面时，我没有遇到这个错误，只有在手动输入URL时才会出现这个错误。 - Melchia

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

它应该可以工作！

- Fateh Mohamed

---

在所有的尝试都失败之后，我看到了你的回答在这里，并意识到我必须重新启动nginx。 - fix

Answer 7

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

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

- Carsten

---

我没有nginx配置文件，我所做的唯一步骤就是上面写的那些。我只是添加了一个Staticfile，然后推送了dist文件夹。 - Melchia

https://dev59.com/tFkS5IYBdhLWcg3woIBR - Carsten

如何为pivotal.io配置nginx。我没有服务器端，我所做的都是在前端方面。 - Melchia

Answer 8

如果你要将你的 Angular 应用部署到 S3，你需要设置你的 Error Document 和索引文档为 index.html，并且设置空重定向规则（/properties/static website）。

- Saad Abbasi

Answer 9

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

- Ayush Agrawal