Question

我正在关注Angular 2路由示例。使用“精简”网络服务器我可以从根和深层链接工作导航，但是使用Apache我可以从根导航，但是当跟随链接指向路由时会得到404 Not Found错误。

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

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

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

TFS

我确实为类似的Angular 1问题尝试了一些.htaccess解决方案，但没有运气。如果有人在Apache上进行过Angular 2路由和深层链接，请告诉我你是如何实现的。

eclipse IDE

Boot.ts

Mac

Answer 1

如果您希望它与Apache一起使用，上述答案并没有真正回答这个问题。 HashLocationStrategy仍然是一个选项，但如果您希望它在Apache上运行，您需要执行以下操作：

在与.htaccess相同的位置创建新文件index.html。以下代码将在内部：

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

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

根据Angular 2 routing and direct access to a specific route : how to configure Apache?

中的问题+回答改编的答案

Answer 2

对于那些在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>

如果仍然遇到错误，请运行这两个命令：

sudo a2enmod rewrite
sudo systemctl restart apache2

Answer 3

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

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

Answer 4

您必须让服务器处理所有路由回到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 5

根据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文件，则在点击每个直接网址链接后我得到404 not found。现在使用这个.htaccess文件一切正常。

Answer 6

在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 7

来自refreshing the page results in 404 error- Angular 6：

1）在部署文件夹的web.xml中放入以下代码：

<error-page>
     <error-code>404</error-code>
     <location>/index.html</location>
</error-page>

Answer 8

如果您正在使用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 9

这个生成器适用于我和我的 HostMonster 帐户，它使用 Apapche HTTPD。它生成的 .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>

谢谢你，朱利安庞普！

Angular2路由/深层链接不能与Apache 404一起使用

9 个答案: