Angular 2 路由无法使用 Apache 进行页面刷新答案

【问题标题】：Angular 2 routing not working on page refresh with ApacheAngular 2 路由无法使用 Apache 进行页面刷新
【发布时间】：2020-12-21 12:59:30
【问题描述】：

将 Angular 2 RC 4 与更新的 @angular/router 一起使用，我使用 this question 中的答案将路由 URL 显示在浏览器中

但是，当我刷新或直接请求具有非默认路由的页面时，它会将我带到默认页面（就像我请求 index.html）而不是我想要的路由页面。如何使 Angular 2 路由在使用 Apache 2.4 刷新页面时正常工作？

路线和引导程序：

const routes: RouterConfig = [
{ path: '', redirectTo: 'dashboardTab', terminal: true },
{ path: 'dashboardTab', component: DashboardComponent },
{ path: 'missionTab', component: MissionComponent, children: childRoutes }];

bootstrap(NavbarComponent, [disableDeprecatedForms(), provideForms(),   provideRouter(routes), {provide: Window, useValue: window}, HTTP_PROVIDERS, ResponsiveState, {provide: PLATFORM_DIRECTIVES, useValue: RESPONSIVE_DIRECTIVES, multi: true}]).catch((err: any) => console.error(err));

index.html 中的基本 href： <base href="/">

【问题讨论】：

请展示一些代码来演示您要完成的工作。路由，<base> 标记在index.html，bootstrap(...)，...
@GünterZöchbauer 完成。我最初并不认为添加代码是相关的，尽管当我在 lite-server 上运行我的代码时页面刷新路由有效。它似乎在我的 Apache 服务器上不起作用。
terminal: true 在最新版本中应为 pathMatch: 'full'。如果它使用 lite-server 而不是 Apache 运行，那么您的 Apache 未配置为支持 HTML5 pushState。您可以尝试切换到HashLocationStrategy 进行验证。如果可行，则说明是服务器配置问题。

标签： apache angular angular2-routing

【解决方案1】：

基本上 apache 对您的 Angular 应用程序路由一无所知，因此它在这里无能为力。

但是

这里的诀窍是让您的 apache 服务器即使在找不到页面的情况下也可以提供 index.html 文件，以便 angular 然后可以渲染路由。

步骤如下

在您的 Angular 应用程序 src 文件夹中创建一个名为 .htaccess 的文件，并将以下代码复制到其中


  RewriteEngine On
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
  RewriteRule ^ /index.html

您需要将此 .htaccess 文件添加到 angular.json 中的 assets 数组中，以便 Angular 在您进行生产构建时将其复制到您的 dist 文件夹中。
最后在创建生产构建之后，如果您将应用程序复制到 apache 服务器，一切都应该可以正常工作，但如果没有，您可能需要执行最后一步

在你的服务器中去/etc/apache2/apache2.conf并修改

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

看起来像这样

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

如果这不起作用，您可能没有启用 mod rewrite

sudo a2enmod rewrite

查看 Angular 团队的部署指南

https://angular.io/guide/deployment

【讨论】：

【解决方案2】：

使用apache2的vhost中的代码：

<Directory /var/www/html/yourproject>
    Options Indexes FollowSymLinks
    RewriteEngine On
    RewriteBase /yourproject
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /yourproject/index.html [L]
</Directory>

并使用 index.html 中的代码

<script>document.write('<base href="' + document.location + '" />');</script>

这解决了。

【讨论】：

谢谢，即使没有更改 index.html，这对我来说也很有效。

【解决方案3】：

使用它为任何不映射到文件系统中任何内容的 URL 设置处理程序。

FallbackResource /my-app/index.html

在您的 httpd.conf 或 /etc/apache2/sites-enabled/000-default.conf 配置文件中添加这行代码。

您的 Angular 应用程序路由将在刷新时起作用。

【讨论】：