Question

我正在使用以下路由设置Angular Web应用程序：https://wei.insa-cvl.org

当我使用此应用程序内的链接时，可以打开不同的页面。例如，单击“ Mot de passeoublié？”链接将我带到好页面：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 但我不明白，为什么??

Answer 1

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

这是因为散列及其后的内容未发送到服务器。在您的情况下，它之所以起作用是因为Angular在主机名之后策略性地将哈希放在了主机名之后，这样，当用户手动更改URL时，浏览器将仅采用域名并将其用于您的Web服务器将收到的请求中，并且由于未指定文件，将使用默认的关联文件（通常为index.html）进行回复。

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

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

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

Answer 2

当您请求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）。 / p>

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

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

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

使用网址访问时出现角度错误500

2 个答案: