问题描述
我将第一个Angular项目上载到生产中。 该网站可在此处访问:http://urigross.com 当我在地址字段“ urigross.com”中键入内容时,网站运行正常。 刷新页面时,我收到一条错误消息。例如,当我在地址字段中键入准确的路由(例如“ www.urigross.com/heb/about”)时,也会发生这种情况。我尝试的每条路线都会发生这种情况。 错误消息是:
”未找到 在此服务器上找不到请求的URL。
此外,尝试使用ErrorDocument处理请求时遇到了404 Not Found错误。”
我尝试与站点支持联系,他们告诉我我的角度路由可能配置不正确。 该网站在我的电脑上使用“ ng s”命令可以在本地完美运行。 我尝试在stackoverflow上搜索,但结果是针对PHP而不是角度项目。
我的路由代码:
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 { }
解决方法
您的服务器是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应用
,服务器需要配置为发送index.html作为404的响应,因为这是angular中唯一的html文件。开发过程中,Angular cli对此进行了处理。
还要检查位置策略
,this answer by @kiranvj 也为我解决了这个问题。但我有一个重要的观察。
如果您在服务器上有子域,将他的答案中的代码片段添加到根公共文件夹中的 // // This doesn´t work from styled-components DOCS
// {
// "plugins": [
// [
// "babel-plugin-styled-components",// {
// "ssr": false
// }
// ]
// ]
// }
// This works!
{
"presets": ["next/babel"],"plugins": [["styled-components",{ "ssr": true }]]
}
文件中,它将对所有子域产生影响。
如果您想对特定子域产生不同的效果,您可以更改该子域根文件夹中的 .htaccess
文件。