1

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

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

这是我的代码：

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

应用程序路由.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
4

1 回答 1

1

Angular 应用程序是单页应用程序（也就是说，它们应该始终只提供一个页面 - 即 index.html）。基本上，你会发现，如果你在任何一条路由上点击刷新，你都会遇到问题。这是因为您的网络服务器在应该始终提供 index.html 时尝试提供 /route。

无论路由如何，您都需要将您的产品网络服务器配置为始终提供 index.html。如何做到这一点因网络服务器而异。

于 2021-09-11T17:03:30.177 回答