Angular Routing: Url changes but always shows home page component [closed]-CodePudding

I applied all of the routing from tutorials and I am pretty sure I've done everything I should do but there is a problem that I can't solve.

Basically the problem is, when I clicked a button, URL changes but the visual stays at the home page when it should display just a single line of writing.

angular-routing.module.ts file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AnasayfaComponent } from './components/anasayfa/anasayfa.component';
import { GirisComponent } from './components/giris/giris.component';
import { HakkimizdaComponent } from './components/hakkimizda/hakkimizda.component';
import { IletisimComponent } from './components/iletisim/iletisim.component';

const routes: Routes = [
  { path: 'giris', component: GirisComponent },
  { path: 'hakkimizda', component: HakkimizdaComponent },
  { path: 'iletisim', component: IletisimComponent },
  { path: '', component: AnasayfaComponent },
];

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

export const routingComponents = [
  GirisComponent,
  HakkimizdaComponent,
  IletisimComponent,
];

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ZenPortalNg</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/8c928cd7bc.js" crossorigin="anonymous"></script>
</head>

<body>
    <app-root></app-root>
    <app-anasayfa></app-anasayfa>
</body>

By the way, all of tutorials I follow in index.html they don't declare anything else but app-root but when I only declare app-root nothing shows up on my page unless I put <app-anasayfa> tag which is like my home page.

app.component.html

<app-anasayfa></app-anasayfa>

Whatever I add here do not change anything.

anasayfa.component.html

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
    <li><a routerLink="" routerLinkActive="active" style="margin: 5px;">Anasayfa</a></li>
    <li><a routerLink="/hakkimizda" style="margin: 5px;">Hakkımızda</a></li>
    <li><a routerLink='/iletisim' style="margin: 5px;">İletişim</a></li>
</ul>
<button type="button" class="btn btn-outline-dark" style="margin: 9px;" routerLink="/giris">Giriş Yap</button>

This is the related part to routing in my home page html.

CodePudding user response：

Your main module should bootstrap app-root (it is default setting when starting new project)

@NgModule({
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

Your AppComponent (or app-root) should have <router-outlet> element inside its HTML file.

Then any route you go to will project selected component into router-outlet alongside any other content in AppComponent.

In most cases, you don't want to edit index.html <body>.

more info: https://angular.io/guide/router