Angular2 路由/深度链接不适用于 Apache 404

Question

我正在关注 Angular 2 路由示例。使用“lite”网络服务器，我可以从根目录导航，并且深度链接可以工作，但是使用 Apache，我可以从根目录导航，但是在直接链接到路由时会出现 404 Not Found 错误。

例如，以下 URL 适用于由 npm 在端口 3000 上启动的“lite”网络服务器。

http://localhost:3000/crisis-center/2

但是下一个针对 Apache 在端口 80 上运行的 URL 失败。

http://localhost/crisis-center/2
The requested URL /crisis-center/2 was not found on this server.

我确实尝试了一些针对类似 Angular 1 问题推荐的 .htaccess 解决方案，但没有成功。如果有人在 Apache 上进行过 Angular 2 路由和深度链接工作，请告诉我您是如何实现的。

@RouteConfig([
{ // Crisis Center child route
path: '/crisis-center/...',
name: 'CrisisCenter',
component: CrisisCenterComponent,
useAsDefault: true
},

{path: '/heroes',   name: 'Heroes',     component: HeroListComponent},
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter',  'CrisisDetail', {id:3}]}
])

Boot.ts

import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent}     from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Answer 1

你必须让你的服务器处理所有返回 index.html 的路由或使用HashLocationStrategy

(https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html)

看看：

Is Angular 2's Router broken when using HTML5 routes?

Answer 2

由于其他答案并不能真正回答您是否希望它与 Apache 一起使用的问题。 HashLocationStrategy 仍然是一个选项，但如果您希望它在 Apache 上按原样工作，您需要执行以下操作：

在与您的index.html 相同的位置创建一个新文件.htaccess。以下代码将在里面：

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /crisis-center/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

（请注意，问题中index.html 中的<base href="/crises-center/"> 应该与RewriteBase 相同）

答案改编自Angular 2 routing and direct access to a specific route : how to configure Apache?的问题+答案

Answer 3

根据 Rein Baarsma 的回答，您必须创建 .htaccess 文件并将其放在与 Apache 服务器上的 index.html 相同的目录中。例如，它可能是 htdocs 目录，但这取决于您的 Apache 配置。

但是我使用不同的 .htaccess 文件内容，它适用于所有链接/路由，无需指定重写基础：

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这是对 Rein Baarsma 提供的代码的修改。

我的应用程序是基于 angular-cli 项目的 Angular 2+ (4.x.x) 应用程序。它几乎不依赖于 Angular 路由提供的地址的直接 URL。如果没有上面的.htaccess 文件，我在单击每个直接 URL 链接后得到了404 not found。现在使用这个.htaccess 文件一切正常。

Answer 4

对于 app.routes.module.ts 中的 angular4/angular 包括 useHash 如下，

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})

Answer 5

对于那些在 Apache 上运行的人 使用这个 .htaccess

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

如果您仍然遇到错误，请运行以下 2 个命令：

sudo a2enmod rewrite
sudo systemctl restart apache2

Answer 6

如果您正在使用 ionic 构建并在托管服务器上上传您的网站，那么您需要在 www 文件夹内的根目录中添加 .htaccess 文件。

    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) / [R=302,NC,L]

Answer 7

在 httpd.conf 或 apache2.conf 中添加以下内容：

<Directory "/var/www/html/">
    Options FollowSymLinks
    Allow from all
    AllowOverride All
</Directory>

• 将“/var/www/html/”更改为您的网站位置

并在 .htaccess 中粘贴：

RewriteEngine On
      # If an existing asset or directory is requested go to it as it is
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
      # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Answer 8

这个生成器适用于我和我的使用 Apapche HTTPD 的 HostMonster 帐户。它生成的 .htaccess 文件开箱即用：

https://julianpoemp.github.io/ngx-htaccess-generator/#/generator

# Generated with ngx-htaccess-generator v1.0.7
# https://julianpoemp.github.io/ngx-htaccess-generator/


<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -s [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  # Redirect all non-file routes to index.html
  RewriteRule ^(?!.*\.).*$ index.html [NC,L]
</IfModule>

谢谢你，朱利安·庞普！