33

I am following the Angular 2 routing examples. Using the "lite" webserver I am able to navigate from the root and deep linking works, but using Apache I can navigate from the root, but get 404 Not Found errors when following links direct to routes.

For example the following URL works against the "lite" webserver started on port 3000 by npm.

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

But the next URL against Apache running on port 80 fails.

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

I did try a few .htaccess solutions recommended for similar Angular 1 issues but no luck. If anyone has had Angular 2 routing and deep linking work on Apache please do let me know how you achieved that.

@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]);
4

8 回答 8

56

由于其他答案并不能真正回答您是否希望它与 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 路由的问题+答案并直接访问特定路由：如何配置 Apache？

于 2016-04-13T06:56:27.730 回答
15

对于那些在 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
于 2017-09-08T23:35:55.403 回答
6

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

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})
于 2017-07-19T14:04:00.553 回答
4

根据 Rein Baarsma 的回答，您必须创建.htaccess文件并将其放在与index.htmlApache 服务器上相同的目录中。它可能是例如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.xx) 应用程序。它几乎不依赖于 Angular 路由提供的地址的直接 URL。单击每个直接 URL 链接后.htaccess，我得到了上面没有文件。404 not found现在使用这个.htaccess文件一切正常。

于 2017-05-27T13:13:22.840 回答
2

如果您正在使用 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]
于 2019-05-14T17:25:19.457 回答
1

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

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

看一眼：

使用 HTML5 路由时 Angular 2 的路由器是否损坏？

于 2016-01-15T16:58:16.970 回答
1

在 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
于 2019-08-13T17:55:15.363 回答
0

这个生成器适用于我和我的使用 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>

谢谢你，朱利安庞普！

于 2021-06-13T03:22:10.260 回答