How can I setup HashLocationStrategy in latest Angular properly?

So I have a spa made in Angular. I made it for a friend so I only have acces to the ftp server and I can't configure it to work with the default Angular navigaton. During the project generation I 'ticked' the option for routing. I tried setting up HashLocationStrategy according to the Angular tutorial but it doesn't work and I can't figure out why. This is my code:

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

This is my navbar:

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

And this is my app.component.html:

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

I didn't setup base href in the index.html so it should work theoretically. My url with node.js look like this on startup: http://localhost:4200/#/ . Every time I click a nav item it doesn't redirect but the navbar and the maincomponent is loaded up without a problem. Could someone help with this?

I think the problem is that you misspelled the "routerlink" attribute. It should be routerLink with capital "L".