Как я могу правильно настроить HashLocationStrategy в последней версии Angular?

Question

Итак, у меня есть спа на Angular. Я сделал это для друга, поэтому у меня есть доступ только к ftp-серверу, и я не могу настроить его для работы с навигацией по Angular по умолчанию. Во время генерации проекта я ставил галочку на опции маршрутизации. Я попытался настроить HashLocationStrategy согласно руководству по Angular, но он не работает, и я не могу понять, почему. Это мой код:

App-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { DaysComponent } from './days/days.component';
import { MainComponent } from './main/main.component';
import { NavComponent } from './nav/nav.component';
import { ProgramComponent } from './program/program.component';
import { SignupComponent } from './signup/signup.component';
import { TeachersComponent } from './teachers/teachers.component';

const routes: Routes = [
  {path: 'contact', component: ContactComponent},
  {path: 'days', component: DaysComponent},
  {path: '', component: MainComponent},
  {path: 'nav', component: NavComponent},
  {path: 'program', component: ProgramComponent},
  {path: 'signup', component: SignupComponent},
  {path: 'teachers', component: TeachersComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Это моя навигационная панель:

ul class="navbar-nav ml-auto smooth-scroll mx-auto">
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          onclick="location.href='#mainpage'" routerlink="/" href="/">Kezdőlap</a>
      </li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/program" href="/program">Programok</a></li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/days" href="/days">A hét menete</a></li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/sign" href="/signup">Jelentkezés</a></li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/teachers" href="/teachers">Oktatók</a></li>
    </ul>

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { ContactComponent } from './contact/contact.component';
import { ProgramComponent } from './program/program.component';
import { DaysComponent } from './days/days.component';
import { TeachersComponent } from './teachers/teachers.component';
import { SignupComponent } from './signup/signup.component';
import { MainComponent } from './main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    ContactComponent,
    ProgramComponent,
    DaysComponent,
    TeachersComponent,
    SignupComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

А это мой app.component.html:

<app-nav></app-nav>
<router-outlet></router-outlet>

Я не устанавливал базовый href в index.html, поэтому теоретически он должен работать. Мой URL-адрес с node.js при запуске выглядит так: http://localhost:4200/. Каждый раз, когда я щелкаю элемент навигации, он не перенаправляется, но панель навигации и основной компонент загружаются без проблем. Может ли кто-нибудь помочь с этим?

Answer 1

Я думаю, проблема в том, что вы неправильно написали атрибут "routerlink". Должен бытьrouterLink с большой буквы.