Angular Registration page does not load after adding methods & services

Question

I created an email authentication based registration page in my angular app, added the code with submission functionality (onSubmit) to register.component.html and the methods & services in register.component.ts & UserService.ts files.

Problem:

After adding the code as shared below, the registration page (register.component.html) itself does not load when I click the corresponding router link;

the issue is not with routing as it all worked fine until I added the methods & services.

No error thrown at time of compilation.

Pls suggest what to do.

Showing my respective files in register component:

register.component.html

<style>
  .form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  flex-wrap: wrap;
  margin-top:25px;
}
.form-row {
  display: flex;
  flex-wrap: nowrap;
}
.form-group {
  flex: 1;
  margin: 20px;
}

</style>


<div class="registrationForm" type="FormGroup">
  <form (ngSubmit)="onSubmit()">

    <div class="form-row">

      <div class="form-group">
        <label for="exampleInputUsername">Username</label>
        <input type="text" class="form-control" id="exampleInputUsername" placeholder="eg. Niti Sara">
      </div>

      <div class="form-group">
        <label for="exampleInputEmail1">Email:</label>
        <input type="email" [(ngModel)]="email" name="email" required class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="eg. [email protected]">
      </div>

    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="exampleInputPhone">Phone No.</label>
        <input type="number" class="form-control" id="exampleInputPhone" placeholder="eg. +1300 400 5000" >
      </div>
      <div class="form-group">
        <label for="exampleInputUrl">Website URL</label>
        <input type="link" class="form-control" id="exampleInputUrl" placeholder="eg. https://example.com/">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="exampleInputCname">Your Organisation</label>
        <input type="text" class="form-control" id="exampleInputCname" placeholder="eg. Enter Your Organisation Name">
      </div>
    </div>

    <div class="form-row">
      <label>Password:</label>
      <input type="password" [(ngModel)]="password" name="password" required>
    </div>

    <button type="submit" class="btn btn-primary" style="margin-left:220px;margin-top:20px;">Submit</button>
  </form>
</div>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from 'src/app/register/UserService'; //import the user service
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; //import form modules



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

export class RegisterComponent implements OnInit {

  registrationForm: FormGroup;
  email:string ='';
  password:string ='';
  submitted = false;

  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private userService: UserService,
  )
 {
  this.registrationForm = this.formBuilder.group({});

  }

  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      email: [this.email, [Validators.required, Validators.email]],
      password: [this.password, [Validators.required, Validators.minLength(6)]],
    });
  }

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

  onSubmit() {
    this.submitted = true;
    if (this.registrationForm.invalid) {
      return;
    }

    //call the user service to register the user
    this.userService.register(this.registrationForm.controls['email'].value, this.registrationForm.controls['password'].value)
    .subscribe(data => {
      // handle the response
  });
  //error handling can b introduced
  }

}

UserService.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private baseUrl = 'http://localhost:8080/'; // replace with your backend URL

  constructor(private http: HttpClient) { }

  //check the use of 'Observable'
  register(email: string, password: string): Observable<any> {
    const data = {
      email: email,
      password: password
    };
    return this.http.post(`${this.baseUrl}/register`, data);
  }
}

This is what my browser console says:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]: 
  NullInjectorError: No provider for FormBuilder!

Answer 1

The problem was due to not adding FormsModule & ReactiveFormsModule in both app.module.ts & register.component.spec.ts

app.module.ts

import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

imports: [
FormsModule,
ReactiveFormsModule
],

register.component.spec.ts

import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ RegisterComponent ],
      imports: [
        FormsModule,               // << ----- add this line
        ReactiveFormsModule        // << ----- add this line
      ]
    })