Question

在prod服务器上构建并部署我的angular 8项目后，我试图访问某些URL，例如： https://serveraddress/admin/ 找不到服务器返回404错误，这在localhost上完美运行，我无法理解为什么发生这种情况！其他路线有效，但相关的管理信息中心网址无效！

这是我的路由文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component'
import { AuthenticationComponent } from './components/authentication/authentication.component'
import { RegisterComponent } from './components/register/register.component'
import { TheaterComponent } from './components/theater/theater.component'
import { ShowsListComponent } from './components/shows-list/shows-list.component'
import { GiftChecksComponent } from './components/gift-checks/gift-checks.component'
import { FaqComponent } from './components/faq/faq.component'
import { EspaceadminComponent } from './components/espaceadmin/espaceadmin.component';
import { GestionFaqComponent } from './components/gestion-faq/gestion-faq.component';
import { GestionUsersComponent } from './components/gestion-users/gestion-users.component';
import { GestionCGVComponent } from './components/gestion-cgv/gestion-cgv.component';

import { AuthGuard } from './_shared/_guards/auth.guard'
import { GestionGiftComponent } from './components/gestion-gift/gestion-gift.component';
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'authentication',
    component: AuthenticationComponent,

  },
  {
    path: 'register',
    component: RegisterComponent,
  },
  {
    path: 'theater',
    component: TheaterComponent
  },
  {
    path: 'shows',
    component: ShowsListComponent
  },
  {
    path: 'restaurants',
    component: RestaurantsComponent
  },
  {
    path: 'gifts',
    component: GiftChecksComponent
  },

  {
    path: 'faq',
    component: FaqComponent

  },
  {
    path: 'gestionfaq',
    component: GestionFaqComponent

  },
  {
    path: 'about',
    component: AboutComponent

  },
  {
    path: 'CGV',
    component: SellsConditionsComponent

  },
  {
    path: 'shows/search/:key',
    component: ShowsSearchComponent

  },
  {
    path: 'restaurants/search',
    component: RestaurantsSearchComponent

  },
  {
    path: 'shows/:id/details',
    component: ShowDetailComponent

  },
  {
    path: 'restaurants/:id/details',
    component: ShowDetailComponent

  },
  {
    path: 'profile/infoPerso',
    component: PersonalInfoComponent
  },
  {
    path: 'profile/updatepassword',
    component: UpdatePasswordComponent
  },
  {
    path: 'reservation',
    component: CombinedReservationComponent
  },
  {
    path: 'profile/contermarques',
    component: ContremarquesComponent
  },
  {
    path: 'profile/cheques-cadeaux',
    component: ChequesCadeauxComponent
  },
  {
    path: 'profile/tableauDeBord',
    component: TableauDeBordComponent
  },
  {
    path: 'profile/comptefidelite',
    component: CompteFideliteComponent
  }


];

const routesAdmin: Routes = [
  {
    path: 'admin',
    component: EspaceadminComponent,
    children: [
      {
        path: 'admin/gestionfaq',
        component: GestionFaqComponent

      },
      {
        path: 'admin/gestionusers',
        component: GestionUsersComponent

      },
      {
        path: 'admin/gestioncgv',
        component: GestionCGVComponent

      },
      {
        path: 'admin/gestionchecks',
        component: GestionGiftComponent

      },

    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes), RouterModule.forChild(routesAdmin)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

部署后，我在Nginx中收到错误404找不到

事实是，Angular8 +是单页应用程序。

当您请求yourserver.com/some-page时，没有<project_root>/some-page/index.html可以投放，因此出现404错误。

您需要做的是，每当服务器访问未找到的页面时，都将重定向回index.html，以便Angular可以处理

对于您的/etc/nginx/sites-enabled/<your_site>上的 nginx ：

server {

    # other stuff

    # MAKE SURE IT HAS THIS CONFIG HERE:
  location / {
    try_files $uri $uri/ /index.html;
  }

    # other stuff
}

对于其他服务器，例如 Apache ，请参阅THIS DOCUMENTATION

Answer 2

处理这个问题的两种基本方法

在路由中添加 useHash true "RouterModule.forRoot(routes, {useHash: true})"
在生产构建后在 dist/projectFolder 中添加 404.html 页面（这对我有用。）

有关部署的详细信息，请参阅 https://angular.io/guide/deployment 以获取更多详细信息

角度路由：在生产服务器上部署后找不到路由

2 个答案: