Angular Routing: Url changes but always shows home page component

Sevim Özsoy

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.

Chiffie

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

angular component routing to home page

Angular routing always redirect to home page

Angular Home Page Component routing issue

component url shows is the home page with any url address in the app

angular 4 change home page url and component

Angular Routing changes the page

Angular5, on routing, url changes but it doesnt load the same page

how to refresh page when routing url changes in angular

Angular routing - redirect url to component

Angular 6 Routing Shows Blank Page no errors

Angular Firebase authentication always redirects to home page

How to disable url changes with Angular routing

Component routing in a single page app Angular 6

Angular routing issue - url updating but not page

Angular routing multiple components under home page path

Angular file input changes only shows in the first component

Routing always reloads the page

When reloading an Angular app go always to the root page ignoring routing

Prevent routing in Angular when user manually changes url in browser tab

Angular 5 - Routing changes url but doesn't navigate

Angular 14: App not routing even though path changes in the URL

Angular routing problem. App.component content shows in every component

Angular 5 - Routing to the same component with different URL's

Angular Routing: Avoid destroy of active component after changing the url?

When I call a component in Angular it doesn't appears, and the home component still appears even when the endpoint changes

Angular routing for the component

routing children component angular

Angular Routing Component Testing

Angular nested component routing