Angular 2路由无法使用Apache刷新页面 [英] Angular 2 routing not working on page refresh with Apache

问题描述

使用Angular 2 RC 4和更新的@ angular/router，我使用

Using Angular 2 RC 4 with the updated @angular/router, I got the route URLs to display in the browser using the answer in this question

但是，当我刷新或直接请求具有默认路由以外的路由的页面时，它将带我转到默认页面(就像我请求index.html一样)，而不是我想要的路由页面.如何在使用Apache 2.4刷新页面时使Angular 2路由正常工作?

However, when I refresh or directly request a page with a route other than the default, it takes me to the default page (as if I requested index.html) rather than the routed page I want. How can I make the Angular 2 routes work correctly on a page refresh with 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 href in index.html: <base href="/">

推荐答案

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

Basically apache does not know anything about your angular application routes so it can't do much here.

但是

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

Trick here is to get your apache server to serve index.html file even in page not found situations so that angular then can render the routes.

以下是步骤

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

1. Create a file called .htaccess inside of your angular applicaiton src folder, and copy the following code to it

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

1. 您需要将此.htaccess文件添加到angular.json中的assets数组中，以便在进行生产构建时，angular将其复制到您的dist文件夹中.

1. 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.

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

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

转到服务器内部的/etc/apache2/apache2.conf并进行修改

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 rewrite

If that does not work probably you might not have enabled mod rewrite

sudo a2enmod rewrite

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

See the deployment guide from angular team

https://angular.io/guide/deployment

这篇关于Angular 2路由无法使用Apache刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！