Question

我已将angular 5 app部署到托管。我已使用ng build --prod --build-optimizer部署了项目，但在服务器路由链接中不起作用。（仅适用于主页）。其他组件没有。

这是我的app.routing.modules.ts

const routes: Routes = [
  {path: 'home', component: HomeComponent, children: [
      {path: '', redirectTo: 'main', pathMatch: 'full'},
      {path: 'main', component: MainComponent},
      {path: 'cs', component: CsSetkaComponent},
      {path: 'dota', component: DotaSetkaComponent},
      {path: 'dota/:id', component: DotaDesComponent},
      {path: 'cs/:id', component: CsDesComponent},
      {path: 'news', component: NewsComponent},
      {path: 'news/:id', component: NewDesComponent},
      {path: 'gallery', component: GalleryComponent}
    ]},
  {path: 'admin', component: AdminComponent},
  {path: 'panel', component: AdminPanelComponent, canActivate: [AuthGuard]},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: '**', component: ErrorComponent}
];

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

这是我的home.component.html

<div class="bg">
<!--Header-->
<div class="header">
  <div class="w3layouts_header_left">
    <div class="top-nav-text">
      <p>Позвоните нам: <span class="call">+99899 839 02 55</span></p>
      <p>Свяжитесь с нами по электронной почте : <span class="mail"><a href="mailto:nshaxrizod@mail.ru">info@example.com</a></span></p>
    </div>
  </div>
  <div class="clearfix"></div>
</div>
<div class="w3_navigation">
  <nav class="navbar-default navbar navbar-left navbar-expand-lg navbar-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="w3_navigation_pos">
      <h1><a href=""><span>Toshkent-Cup</span></a></h1>
    </div>
    <div class="navigation_pos collapse navbar-collapse navbar-right" id="navbarSupportedContent">
      <nav class="text-center effect">
        <ul class="navbar-nav nav mr-auto">
          <li class="active"><a href="" class="scroll"><span data-hover="Главная">Главная</span></a></li>
          <li><a href="/home/news" ><span data-hover="Новости">Новости</span></a></li>
          <li><a href="/home/main#about" du-smooth-scroll class="scroll"><span data-hover="О нас">О нас</span></a></li>
          <li><a href="/home/main#tournament" du-smooth-scroll="tournament" class="scroll"><span data-hover="Турнир">Турнир</span></a></li>
          <li><a href="/home/main#mail" class="scroll"><span data-hover="Контакты">Контакты</span></a></li>
          <li><a href="/home/gallery" class="scroll"><span data-hover="Галерея">Галерея</span></a></li>


        </ul>
      </nav>
    </div>
  </nav>
</div>


<router-outlet></router-outlet>

</div>

当我点击<li><a href="/home/gallery" class="scroll"><span data-hover="Галерея">Галерея</span></a></li>时，它会给我404错误

我如何解决？

Answer 1

这种方法有两个问题。

首先，使用角度路由器时，不应在href标记上使用a属性。相反，您应该使用routerLink属性，如：

routerLink="/home/news"

否则您的应用程序不再是单页应用程序，因为您在每次链接点击时都要求向服务器发送新页面（并且您请求的页面甚至不存在于您的服务器中）。

我相信您可能面临的第二个问题是，在托管Angular应用时，您的服务器应始终响应index.html文件。因此，您需要将其配置为在404响应时发送index.html。发生这种情况是因为索引是您的服务器知道的唯一页面，因此，当您请求/ home / news页面时，它不知道该文件并以404响应。

ANgular 5 app部署

1 个答案: