12

我有一个 angular 4 项目，当我从 运行它时localhost:4200/route-a，它运行良好，当我刷新浏览器时，一切都按预期运行。但是，当我使用 apache 构建ng build并运行它时，导航到localhost/route-a返回一个404. 这是我的路由代码：

imports: [BrowserModule, HttpModule, FormsModule, RouterModule.forRoot([
    { path: 'home', component: HomeComponent },
    { path: 'route-a', component: RouteAComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
  ])]
4

3 回答 3

34

这不是 Angular 问题。这是您的 apache 设置的问题。当您在 Angular 中使用 HTML5 模式（漂亮的 url）时，您必须配置 Apache 以将服务器上不存在资源的所有请求发送到 index.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

原因是当你尝试访问/route-a时，apache 服务器会默认尝试查找目录route-a和其中的 index.html 文件。但是因为你没有那个目录，所以apache会返回404错误。

但是通过告诉 apache，在任何位置或文件不存在的请求中。要发送发送您的 Angular html 文件，Angular 路由器会从那里获取它。

于 2017-06-29T08:00:33.577 回答
7

从 Apache 版本 2.2.16 开始，您可以为此使用 FallbackResource 指令：

<Directory "/var/www/my_blog">
  FallbackResource index.php
</Directory>

检查https://httpd.apache.org/docs/trunk/rewrite/remapping.html#fallback-resource

于 2018-03-20T17:33:58.177 回答
4

有时您可能无权访问服务器配置。对此还有另一种可能的解决方案。

在其中有类似import的RouterModule东西：

RouterModule.forRoot( routes )

您可以useHash这样添加：

RouterModule.forRoot( routes, { useHash: true } )

然后使用生产标志重建您的项目，现在的 URL 将如下所示：

http://yourserver/#/page1/

这样，由于哈希，应用程序将毫无问题地运行，唯一需要的是useHash在 RouterModule 上设置并重建您的应用程序。

重写规则很好，但我认为有更多选择很好。

于 2019-12-19T21:31:03.057 回答