angular - 使用URL访问时出现 Angular 错误500

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中，并使用哈希网址，如下所示: https://wei.insa-cvl.org/#/policy
但是我不明白，为什么？

Answer 1

Hurray I finally found a solution ! I had to add {useHash: true} to my app-routing.module.ts and using the hash URL, like this one : https://wei.insa-cvl.org/#/policy But I don't understand, why ??

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

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

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

将此配置添加到Web服务器后，您就可以使用 Angular Universal，它允许您从服务器呈现模板，从而可以更快地加载页面。