angular - 刷新页面时出现错误信息 "The requested URL was not found on this server."

Question

我将我的第一个 Angular 项目上传到生产环境。
网站可用:http://urigross.com
当我在地址字段中输入“urigross.com”时，网站运行正常。
当我刷新页面时，我收到一条错误消息。例如，当我在地址字段中输入确切的路线(例如“www.urigross.com/heb/about”)时，也会发生这种情况。我尝试的每条路线都会发生这种情况。
错误信息是:
“未找到
在此服务器上找不到请求的 URL。
此外，在尝试使用 ErrorDocument 处理请求时遇到 404 Not Found 错误。”
我尝试联系网站支持，他们告诉我 我的 Angular 路由可能没有正确配置 .
该网站在我的电脑上使用“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]

来自 here
我为我的一个基于 React 的 SPA 做了类似的工作，应该也适用于你的 Angular 应用程序