My html reactive form does not appear. Please see below my code

Question

After I click on see movie button I want to redirect to login page, but my login page does not appear. Where is the problem ?

My movie-list.component.html

<div class="container" style="margin-top: 70px;">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>MovieName</th>
          <th>MovieType</th>
          <th>MovieRoom</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let movie of moviess">
          <td> {{ movie.id }}</td>
          <td> {{ movie.movieName }}</td>
          <td> {{ movie.movieType }}</td>
          <td> {{ movie.movieRoom }}</td>
          <td>
            <!-- <button class="btn btn-primary" (click)="onSelect(movie)"> Select movie</button> -->
            <a routerLink="/login"><button class='btn btn-success'(click)="onSelect()">Select movie</button></a>
          </td>
        </tr>
      </tbody>
    </table>

My movie-list.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Movies } from './movies';
import { Moviess} from './mock-heroes';
import { User } from '../_models';
import { AuthenticationService } from '../_services';


@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})

export class MovieListComponent implements OnInit {

  moviess = Moviess;
  selectedMovie : Movies;

  ngOnInit(): void {}
  
  constructor() {}

  // public onSelect(){
  //   this.selectedMovie = movie;
  // }

  onSelect = function() {
    this.router.navigateByUrl('/login');
  }
}

My login.component.ts

import { Component, OnInit} from '@angular/core';
import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import {} from 'rxjs';
import { ReactiveFormsModule } from '@angular/forms'

import { AlertService, AuthenticationService } from '../_services/index';
import { User } from '../_models/user';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html'
  })

export class LoginComponent implements OnInit {
    name = new FormControl('formControlName');
    loginForm: FormGroup;
    loading = false;
    submitted = false;
    returnUrl: string;
    currentUser: User;

    constructor(
      private formBuilder: FormBuilder,
      private route: ActivatedRoute,
      private router: Router,
      private authenticationService: AuthenticationService,
      private alertService: AlertService
      ) {
        
      this.authenticationService.currentUser.subscribe(x => this.currentUser = x);

  // redirect to home if already logged in
  //   if (this.authenticationService.currentUserValue) { 
  //       this.router.navigate(['./home']);
  // }
  }

  ngOnInit() {
    // this.authenticationService.logout();

    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });

    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }

  // convenience getter for easy access to form fields
  get f() { return this.loginForm.controls; }

  onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.loginForm.invalid) {
    return; 
    }
    this.loading = true;
    this.authenticationService.login(this.f.email.value, this.f.password.value)
      .subscribe(
        _data => {
          this.router.navigate([this.returnUrl]);
        },
        error => {
          this.alertService.error(error);
          this.loading = false;
        });
  }
}

In routing.module.ts I declared the login path and also in ngmodel I have mentioned the logincomponent in declarations.

Where is my mistake?