Angular 8 this.router.navigate() changes URL but not rendering to next page

Question

I'm quite new with Angular and I am setting up the front end of a project in Angular 8 that will eventually use REST API's to display data. Currently I have created 2 custom components.

1. LoginComponent
2. HomeComponent

My goal is only to be redirected to HomeComponent html from LoginComponent html when I click the login button.

Both LoginComponent and HomeComponent are in the same directory level.

Below are the contents of the files.

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    
    import { AppComponent } from './app.component';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    import { AppRoutingModule } from './app-routing.module';
    import { ErrorPageComponent } from './error-page/error-page.component';
    import { HeaderComponent } from './header/header.component';
    import { LoginComponent } from './login/login.component';
    import { HomeComponent } from './home/home.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        PageNotFoundComponent,
        ErrorPageComponent,
        HeaderComponent,
        LoginComponent,
        HomeComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    import { ErrorPageComponent } from './error-page/error-page.component';
    import {LoginComponent} from './login/login.component';
    import {HomeComponent} from './home/home.component';
    
    const appRoutes: Routes = [
      { path: '', component : LoginComponent},
      { path: 'home', component : HomeComponent },
      { path: 'not-found', component: PageNotFoundComponent },
      { path: '**', redirectTo: '/not-found' }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(appRoutes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule {
    
    }

app.component.html

    <div class="web-container">
    
      <div>
      <app-header>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </app-header>
      </div>
    
      <app-login></app-login>
      <router-outlet></router-outlet>
    
    </div>

login.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnInit {
    
      constructor(private router: Router) { }
    
      ngOnInit() {
      }
    
      public onLoginClick(){
        console.log("Login Clicked");
        this.router.navigate(['./home']);
      }
    
    }

login.component.html

    <div class="content">
      <h3>Login</h3>
      <hr />
      <form>
        <button class="btn btn-primary mybtn-login" (click)="onLoginClick()" >Login</button>
      </form>     
    </div>

home.component.html

    <h1  style="color:yellow;">home works!</h1>

home.component.ts

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
      constructor() { }
    
      ngOnInit() { }
    }

Problem

When I click on the Login button, I can see in the browser that it changes the url from http://localhost:4200/ to http://localhost:4200/home. However, it doesn't display any of the contents of home.component.html

It just stays on the login page view and nothing changes on the page.

I'm really confused why it would change the URL but not render the page. I tried adding <router-outlet> to login.component.html which displays the home inside the login page. But ofcourse we don't want to stay/keep showing the login page.

Thanks in advance.

Answer 1

You added both <app-login></app-login> and <router-outlet></router-outlet> in your app.component.html. That means that Login component will always be displayed on the screen, and the content below it will change. Your Home component probably got rendered, but you didn't see it because of the Login page that stayed on the screen. Just remove the <app-login></app-login> since it will be automatically rendered with <router-outlet></router-outlet>, so you don't need to specify it explicitly.

<div class="web-container">

  <div>
  <app-header>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </app-header>
  </div>

  <router-outlet></router-outlet>

</div>