Question

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

但是，当我刷新或直接请求具有非默认路由的页面时，它会将我带到默认页面（就像我请求index.html）而不是我想要的路由页面。如何使用Apache 2.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中的基础href： <base href="/">

Answer 1

使用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>

这解决了。

Answer 2

基本上，apache对您的角度应用程序路线一无所知，因此在这里不能做太多事情。

但是

这里的技巧是让您的apache服务器即使在页面未找到的情况下也可以服务index.html文件，以便有角度的人可以渲染路线。

以下是步骤

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


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

您需要将此.htaccess文件添加到assets中的angular.json数组中，以便在执行以下操作时，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

请参阅角度小组的部署指南

https://angular.io/guide/deployment

Answer 3

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

FallbackResource /my-app/index.html

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

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

Angular 2路由无法使用Apache

3 个答案: