使用 URL 访问时出现 Angular 错误 500答案

【问题标题】：Angular error 500 when accessing with URL使用 URL 访问时出现 Angular 错误 500
【发布时间】：2019-12-07 00:15:09
【问题描述】：

我正在设置一个带有路由的 Angular Web 应用程序：https://wei.insa-cvl.org

当我使用此应用程序中的链接时，我可以打开不同的页面。例如，点击“Mot de passe oublié ?”链接将我带到了好页面：https://wei.insa-cvl.org/auth/forgot-password。但是，当我尝试通过URL 访问此页面时，出现内部服务器错误。

我认为问题来自.htacess 文件，但即使我删除它，我也总是收到此错误。

.htaccess 文件 (source:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]

    RewriteRule ^ /index.html
</IfModule>

路由：

{path: '', component: ApplicationComponent, canActivate: [AuthGuardService]},
{path: 'auth', component: AuthComponent},
{path: 'auth/forgot-password', component: ForgotPasswordComponent}
...
{path: '**', redirectTo: '/auth', pathMatch: 'full'}

我想通过 URL 访问页面，而不仅仅是点击“应用内链接”。有可能吗？

编辑：万岁，我终于找到了解决方案！我必须将{useHash: true} 添加到我的app-routing.module.ts 并使用哈希URL，例如：https://wei.insa-cvl.org/#/policy 但我不明白，为什么？？

【问题讨论】：

当您访问index route 时，您的后端会为您的应用程序提供服务。看起来它没有正确配置为在请求另一条路线时为 Angular 应用程序提供服务
我终于找到了使用“hash URL”的解决方案。但是我怎样才能为其他路由配置后端呢？
这取决于您使用的是什么后端？我自己在使用 .NET Core，您在 Startup.cs 文件中实现此行为。

标签： angular http redirect error-handling

【解决方案1】：

当您请求 URL 时

https://wei.insa-cvl.org/#/policy

您实际上是在请求以下 URL：

https://wei.insa-cvl.org/index.html#/policy

查看index.html 文件？

由于index.html 是托管您的 Angular 应用程序的文件，因此您的 Angular 代码将被执行，并且 Angular 可以处理 URL 的主题标签片段：#/policy。一切正常！

如果您不使用主题标签并直接请求 https://wei.insa-cvl.org/policy，您的服务器会尝试查找名为 policy 的文件或文件夹，但它不存在并且请求失败（错误 500）。

解决方案是将您的服务器配置为将所有请求重定向到index.html 文件，以便执行您的Angular 应用程序。

看起来您正在使用 Apache。我发现以下代码将所有请求重定向到index.html（来源：https://serverfault.com/a/188411）：

RewriteEngine on
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteRule . /index.html [R=302,L]

【讨论】：

【解决方案2】：

万岁终于找到解决办法了！我必须将 {useHash: true} 添加到我的 app-routing.module.ts 并使用哈希 URL，如下所示： https://wei.insa-cvl.org/#/policy 但我不明白，为什么？？

这是因为哈希和之后的内容没有发送到服务器。在您的情况下，它之所以有效，是因为 Angular 将哈希策略性地放在主机名之后，这样，当用户手动更改 URL 时，浏览器将只获取域名并在您的网络服务器将接收的请求中使用它，并且因为未指定文件，将回复关联的默认文件，通常为index.html。

尽管这种方法是有效的并且在大多数情况下都有效，但您可以像您尝试的那样以不同的方式处理这种情况。在您的网络服务器中，对于每个 404 请求（意味着您的网络服务器不知道路由），您可以回复 200 和 index.html 并让 Angular 应用程序在内部处理路由，或者如果您正在使用网络服务器仅对于 Angular 应用，您始终可以返回 index.html 文件。

我假设您使用 Apache 作为您的网络服务器，请查看此StackOverflow 以获得更多帮助。

将此配置添加到网络服务器允许您使用Angular Universal，它允许您从服务器呈现您的模板，从而加快页面的加载速度。

【讨论】：