Angular 路由在生产环境中不起作用（aruba 托管）

Question

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

我怀疑是 aruba 服务器配置不当，触发路由时不会回退到 index.html。当我转到 thearkexperience.studio/login 时，服务器将我重定向到 https://admin.aruba.it/PannelloAdmin/Login.aspx，这很奇怪。

这是我的代码：

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

应用-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 { }

首页-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）。基本上，你会发现，如果在任何路由上点击刷新，都会出现问题。这是因为您的网络服务器在应该始终服务 index.html.

时尝试服务 /route

您需要将 prod 网络服务器配置为始终为 index.html 提供服务，而不管路由如何。如何做到这一点因网络服务器而异。

Angular 路由在生产环境中不起作用（aruba 托管）

Angular routing not working in production (aruba hosting)

url-routing

web-deployment

aruba

angular-ui-router

angular