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

问题描述

使用带有更新的@angular/router 的 Angular 2 RC 4，我使用 这个问题

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

路由和引导:

const 路由:RouterConfig = [{路径:''，redirectTo:'dashboardTab'，终端:真}，{ path: 'dashboardTab', 组件: DashboardComponent },{ path: 'missionTab', 组件: MissionComponent, children: childRoutes }];bootstrap(NavbarComponent, [disableDeprecatedForms(), provideForms(), provideRouter(routes), {provide: Window, useValue: window}, HTTP_PROVIDERS, ResponsiveState, {provide: PLATFORM_DIRECTIVES, useValue: RESPONSIVE_DIRECTIVES, multi: true}).(err: any) => console.error(err));

index.html 中的基本 href:

解决方案

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

但是

这里的技巧是让您的 apache 服务器即使在页面未找到的情况下也能提供 index.html 文件，以便 angular 可以渲染路由.

步骤如下

1. 在你的 angular applicaiton src 文件夹中创建一个名为 .htaccess 的文件，并将以下代码复制到其中

<预><代码>重写引擎开启RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d重写规则 ^ - [L]重写规则 ^/index.html

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

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

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

<目录/var/www/>期权索引 FollowSymLinks允许覆盖无要求所有授予</目录>

看起来像这样

<目录/var/www/>期权索引 FollowSymLinks允许覆盖所有要求所有授予</目录>

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

sudo a2enmod 重写

查看angular团队的部署指南

https://angular.io/guide/deployment

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

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?

Routes and bootstrap:

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));

base href in index.html: <base href="/">

解决方案

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

But

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.

Here are the steps

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

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>

To look like this

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

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屋！