Angular路由不能在生产环境中工作(aruba hosting)

Question

我知道这可能是重复的，但我没有在其他问题中找到任何解决方案。我在生产中遇到了一些问题。我尝试了很多解决方案，它只适用于{useHash: true}。我的最后一次尝试是在项目的根目录中设置。htaccess，并尝试不同的配置。

我怀疑aruba服务器没有很好地配置，并且在触发路由时没有回落到index.html。当我访问thearkexperience.studio/login时，服务器将我重定向到https://admin.aruba.it/PannelloAdmin/Login.aspx，这很奇怪。

下面是我的代码:

index.html有<base href="/">

app-routing.component.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {BodyComponent} from "./components/layout/home/body/body.component";
import {HomeComponent} from "./components/layout/home/home.component";
const routes: Routes = [
{
path: '',
loadChildren: () => import('./components/layout/home/home.module').then(m => m.HomeModule),
},
{
path: '**',
redirectTo: ''
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

home-routing.component.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {HomeComponent} from "./home.component";
import {BodyComponent} from "./body/body.component";
import {LoginMobileComponent} from "../../pages/custom/login_mobile/login_mobile.component";
import {LoginComponent} from "../../pages/custom/login/login.component";
import {Custom_1Component} from "../../pages/custom/custom_1/custom_1.component";
import {Custom_2Component} from "../../pages/custom/custom_2/custom_2.component";
import {Custom_3Component} from "../../pages/custom/custom_3/custom_3.component";
const routes: Routes = [
{
path: '',
children: [
{
path: 'login',
component: LoginComponent
},
{
path: 'm/login',
component: LoginMobileComponent
},
{
path: '',
component: BodyComponent
},
{
path: ':page',
component: BodyComponent
},
{path: '**', redirectTo: ''}
]
},
{path: '**', redirectTo: ''}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }

. htaccess

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html

Answer 1

Angular应用是单页面应用(也就是说，它们应该总是只提供一个页面——也就是index.html)。基本上，你会发现，如果你在任何路由上点击刷新，你都会遇到问题。这是因为你的web服务器试图提供/route，而它应该始终提供index.html。

你需要配置你的prod webserver，让它总是为index.html服务，而不管路由是什么。如何做到这一点是不同的web服务器。