Angular - 在此服务器上找不到请求的 URL /home

Question

我会非常简短。

我有一个带有简单导航菜单 (routerLinks) 的 Angular 项目。 如果它在本地主机上，一切都按预期工作，由角度 cli 提供支持。

但是当我将它部署在真实服务器上时（我没有任何 VPS 或任何其他服务器，只有我可以放置文件的文件夹），奇怪的事情开始发生。

该应用程序功能正常，导航功能正常，routeLinks 路由，但是当我刷新浏览器或尝试将某些内容手动写入 URL 行时，每次我都收到 404 未找到。 （所以我在 [domain]/home - 一切正常，但是当我刷新浏览器时，我得到 404 /home not found。

也许我在一个不好的地方寻找问题，这不是角度问题而是关于 HTTP 请求的问题（我对此不太了解）。

你知道我应该从哪里开始吗？

谢谢你，帕维尔 F。

我正在谈论的项目：http: //www.pavel-challenge.cz （不，这不是广告：D）

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PassionsComponent } from './passions/passions.component';
import { QuestionComponent } from './question/question.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { KnowledgeComponent } from './knowledge/knowledge.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'knowledge', component: KnowledgeComponent },
  { path: 'questions', component: QuestionComponent },
  { path: 'passions', component: PassionsComponent },
  { path: '**', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

导航栏.component.html

  <ul>
    <li><a routerLink="/about">About</a></li>
    <li><a routerLink="/knowledge">Knowledge</a></li>
    <li><a routerLink="/questions">Questions</a></li>
    <li><a routerLink="/passions">Passions</a></li>
  </ul>

Answer 1

修正：（对于 Apache HTTP 服务器）

我创建了 .htaccess 文件并将其放入提供者端的根文件夹中。

.htaccess

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

Answer 2

如果您在 Apache 上部署，您应该启用 mod_rewrite 模块：

须藤 a2enmod 重写

然后重启Apache， sudo systemctl restart apache2

之后按照上一个答案在 .htaccess 中进行建议的更改

Answer 3

问题在于您的 HTTP 服务器配置。

您必须在您的主机名之后将所有 URL 指向嵌入您的 Angular 应用程序的 HTML 资源。

就像在 NGINX 中：

 location / {
       root <path to index.html>;
       try_files $uri  /index.html =404;
( if ressource exist serves it, likes images, else load index.html to load angular app )
    }

这是官方文档

在初始加载后导航时，angular router 带头，动态显示位置变化后的数据，无需http请求。

但是如果你直接加载到 <...>/home，http 服务器肯定会尝试加载一个文件 home.html，然后发送一个 404。

Answer 4

我也遇到了同样的问题，但是在编辑.htaccess 文件并启用mod_rewrite模块后错误仍然存在。

我还需要做的是在我的 apache 站点配置中添加下面的代码片段。

<Directory /var/www/html/back-office>
    AllowOverride All
    Require all granted
</Directory>

• 确保您已完成前面答案中的前两个步骤（ mod_rewrite和.htaccess ）。
• 确保目录标记中指定的路径指向您的角度 dist 文件夹。

附加信息。

Answer 5

查看

https://angular.io/docs/ts/latest/guide/deployment.html

它说明了为什么需要配置生产服务器，并为常见服务器提供了大量示例配置。

Answer 6

似乎我无法评论上面的.htaccess解决方案，但可以提供答案。

在运行PHP和Apache的提供程序上实现了上述.htaccess。 它解决了我的问题。

我强烈建议人们在寻找其他解决方案时尝试一下。