刷新页面时出现错误消息“在此服务器上找不到请求的 URL。”答案

【问题标题】：When refreshing page Error message "The requested URL was not found on this server."刷新页面时出现错误消息“在此服务器上找不到请求的 URL。”
【发布时间】：2020-12-07 15:09:03
【问题描述】：

我将我的第一个 Angular 项目上传到生产环境。此处提供的网站：http://urigross.com 当我在地址字段“urigross.com”中输入时，网站运行良好。当我刷新页面时，我收到一条错误消息。当我在地址字段中输入确切的路线时也会发生这种情况，例如“www.urigross.com/heb/about”。我尝试的每条路线都会发生这种情况。错误信息是：

“未找到在此服务器上找不到请求的 URL。

此外，在尝试使用 ErrorDocument 处理请求时遇到 404 Not Found 错误。”

我尝试联系站点支持，他们告诉我我的角度路由可能配置不正确。该网站使用“ng s”命令在我的电脑上本地完美运行。我尝试在 stackoverflow 上搜索，但结果是针对 php 而不是 Angular 项目。

我的路由代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from 'src/app/components/home/home.component';
import { AboutComponent } from 'src/app/components/about/about.component';
import { ContactComponent } from 'src/app/components/contact/contact.component';
import { Page404Component } from 'src/app/components/page404/page404.component';
import { PlywoodHomeComponent } from 'src/app/components/plywood/plywood-home/plywood-home.component';
import { MdfHomeComponent } from 'src/app/components/mdf/mdf-home/mdf-home.component';
import { TegoHomeComponent } from 'src/app/components/tegoShuttering/tego-home/tego-home.component';
import { HardwoodsHomeComponent } from 'src/app/components/hardwood/hardwoods-home/hardwoods-home.component';
import { MapComponent } from 'src/app/components/map/map.component';
import { OsbFjHomeComponent } from 'src/app/components/OsbFj/osb-fj-home/osb-fj-home.component';


const routes: Routes = [
  { path: 'heb/home', component: HomeComponent},
  { path: 'heb/about', component: AboutComponent},
  { path: 'heb/plywood1', component: PlywoodHomeComponent},
  { path: 'heb/mdf', component: MdfHomeComponent},
  { path: 'heb/hardwood', component: HardwoodsHomeComponent},
  { path: 'heb/plywood2', component: TegoHomeComponent},
  { path: 'heb/plywood3', component: OsbFjHomeComponent},
  { path: 'heb/contact', component: ContactComponent},
  { path: 'heb/map', component: MapComponent},
  { path: 'heb/page404', component: Page404Component},
  { path: '', redirectTo: '/heb/home', pathMatch: 'full' },  // Default redirect ( When inserting Domain name).
  // { path: '**', component: Page404Component }
  { path: '**', redirectTo: '/heb/page404', pathMatch: 'full'}  // Redirect when invalid address typed


];

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

【问题讨论】：

标签： angular url-routing angular2-routing production-environment

【解决方案1】：

需要将服务器配置为发送 index.html 作为 404 的响应，因为这是 angular 中唯一的 html 文件。这由开发中的 Angular cli 负责。

还要检查定位策略

【讨论】：

非常感谢您的回答。如何配置发送 index.html 作为 404 的响应？我试着在网上搜索一个正确的例子来说明如何做到这一点，但我没有找到。
这可能取决于您使用的服务器类型及其配置方式。请相应地检查互联网或发布您正在使用的服务器
我使用了 Apache 服务器。我刚刚创建了 .htaccess 文件，就像 kiranvj 建议的那样，一切都很好。

【解决方案2】：

您的服务器是 Apache。您可以使用.htaccess 解决此问题，这是因为您有客户端路由，但是当直接命中服务器时，Web 服务器不知道路由。

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

来自here

我为我的一个基于 React 的 SPA 做过类似的事情，应该也适用于你的 Angular 应用程序

【讨论】：

非常感谢。它正在工作。我只是创建了这个文件并将其上传到主站点文件夹。

【解决方案3】：

this answer by @kiranvj 也为我解决了这个问题。但我有一个重要的观察。

如果你的服务器上有子域，在他的回答中添加代码 sn-p 到根公共文件夹中的.htaccess 文件，它将对所有子域产生影响。

如果您想对特定子域产生不同的效果，可以更改该子域根文件夹中的.htaccess 文件。

【讨论】：