My goal: user is in the welcome page(app component html) and when clicked on button, he should be able to go to another html page. I checked the tutorials and know that i should use routes to do this but whatever I do, i couldn't get this simple thing working with the following code, I click on the button url changes but i cant see the inner content html of hizmetlerimiz file:

App Component Html File:

<app-header></app-header>
<button routerLink="/hizmetlerimiz">click me</button>
<app-footer></app-footer>

App-routing-module.ts file:

const routes: Routes = [
  {
    path: 'hizmetlerimiz',
    component: HizmetlerimizComponent,
  },
  {
    path: '',
    component: AppComponent,
  }
];

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

Hizmetlerimiz Component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'hizmetlerimiz',
  templateUrl: './hizmetlerimiz.component.html',
  styleUrls: ['./hizmetlerimiz.component.css']
})

export class HizmetlerimizComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Hitmetlerimiz Component Html File

<h5>hizmetlerimiz</h5>
<p>some hizmets</p>