apache - Angular 2 路由不适用于 Apache 的页面刷新

Question

使用带有更新的@angular/router 的 Angular 2 RC 4，我使用 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="/">

Answer 1

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

但是

这里的技巧是让你的 apache 服务器服务于 index.html 文件，即使是在找不到页面的情况下，这样 angular 就可以渲染路由。

步骤如下

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

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

2. You need to add this .htaccess file to the assets array in your angular.json so that angular will copy it to your dist folder when you do a production build.

3. finally after creating a production build if you copy your application to apache server everything should work fine, but in case if it does not you may want to do the last step

go to /etc/apache2/apache2.conf inside your server and modify

<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 重写

sudo a2enmod rewrite

请参阅 Angular 团队的部署指南

https://angular.io/guide/deployment