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

Question

我将我的第一个 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 { }

Answer 1

您的服务器是 Apache。您可以使用以下方法修复此.htaccess问题：“发生这种情况是因为您有客户端路由，但当直接访问服务器时，Web 服务器不知道路由。”

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

从这里

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

Answer 2

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

还要检查位置策略