Angular routing在生产中不起作用(aruba托管)

Question

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

我的怀疑是阿鲁巴服务器没有配置好，当路由被触发时不能回退到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)。基本上，您会发现，如果您单击任何路由上的刷新，您将得到问题。这是因为您的when服务器正在尝试为/route提供服务，而它应该始终为index.html提供服务。

您需要将prod the服务器配置为始终为index.html提供服务，而不管路由是什么。如何做到这一点在不同的How服务器上有所不同。