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

Posted 2023-03-25

【中文标题】Angular - 在此服务器上找不到请求的 URL /home

【英文标题】：Angular - The requested URL /home was not found on this server

【发布时间】：2018-05-28 14:17:07

【问题描述】：

我会很简短。

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

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

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

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

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

谢谢你，帕维尔 F。

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

app-routing.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 

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

【问题讨论】：

代码在哪里？

我不确定我应该展示什么。一切正常，除了我所描述的问题。所以也许问题在于忽略了某些东西，而不是糟糕的编码。

【参考方案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>

【讨论】：

我已将我的 Angular 应用程序（产品）上传到运行 apache 的 unix 服务器。我在 /htdocs/testApps/myAngularApp 里面。我尝试将该文件包含在我的根目录/htdocs/testApps/.htaccess 中，并将rewriteRule 编辑为RewriteRule . /myAngularApp/index.html [L]。但我仍然无法重新加载我的页面。我在做什么有什么问题？

帮助了，谢谢！我已将 .htaccess 文件添加到 my project 根文件夹中。对于 Angular，它是 dist 文件夹的子文件夹。

我在 /var/www/html/dist 和 /var/www/html 中添加“.htaccess”，然后重新启动 apache2。我总是找不到相同的错误 404。

【参考方案2】：

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

sudo a2enmod 重写

然后重启 Apache，sudo systemctl restart apache2

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

【参考方案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 )
    

here is the official documentation

在初始加载后导航时，Angular路由器带头，无需http请求即可动态显示位置变化后的数据。

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

【讨论】：

哦...这似乎是合乎逻辑的，在我在这里问之前我已经看到了。现在的问题是：“如果我没有任何/或至少我不知道任何服务器，我该如何配置服务器。我可以在我的应用程序端配置它吗？

不幸的是，你不能。这里的问题与http相关。在角度开始之前的方式。除非您为应用程序的每条路由创建指向 index.html 的符号链接，例如应用程序目录中的 home -> index.html。

好的，现在我知道我的提供商使用 Apache 服务器了。您认为我可以通过创建具有适当设置的 .htaccess 文件来解决我的问题吗？

是的，我想是的，您可以在 angular.io/guide/deployment#development-servers 的示例中使用 .htaccess

谢谢你，皮埃尔。我们明白了:)