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

使用Angular 2 RC 4和更新的@Angular/router，我获得了在浏览器中使用中的答案显示的路由URL

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

路由和引导：

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中的base href:

---

使用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$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/yourproject/index.html[L]

并使用index.html中的代码

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

document.write（“”）；

---

这就解决了问题。

基本上，apache不知道有关angular应用程序路由的任何信息，所以它在这里做不了什么

但是

这里的诀窍是让apache服务器提供

index.html

文件，即使在页面未找到的情况下，这样angular就可以呈现路由

以下是步骤

在角度应用程序的

src

文件夹中创建一个名为

.htaccess

的文件，并将以下代码复制到其中

您需要将此

.htaccess

文件添加到

angular.json

中的

assets

数组中，以便在进行生产构建时，angular将其复制到您的

dist

文件夹中

最后，在创建生产构建之后，如果您将应用程序复制到apache服务器，一切都应该正常工作，但如果不正常，您可能需要执行最后一步

进入服务器内部的

/etc/apache2/apache2.conf

并修改

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

请参阅angular团队的部署指南

---

使用此选项为任何未映射到文件系统中任何内容的URL设置处理程序

FallbackResource/my app/index.html

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

将这行代码添加到httpd.conf或/etc/apache2/sites enabled/000-default.conf配置文件中

---

您的angular应用程序路由将在刷新时工作。

请显示一些代码，演示您正在尝试完成的任务。路由，

标记在

index.html

，

引导（…）

，…@GünterZöchbauer完成。我最初并不认为添加代码是相关的，不过当我在lite服务器上运行代码时，页面刷新路由是有效的。它似乎在我的Apache服务器上不起作用。

terminal:true

在最新版本中应该是

pathMatch:'full'

。如果它使用lite服务器运行，但不使用Apache，则您的Apache未配置为支持HTML5 pushState。您可以尝试切换到

HashLocationStrategy

进行验证。如果这样做有效，那就是服务器配置问题。谢谢，即使没有index.html更改，这对我来说也非常有效。

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

sudo a2enmod rewrite