MVC View not displaying Angular's reactive form's html page?

I created a .ts file "accounts.component.ts" within project root "project/src/app/Component" with below code:

    import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-accounts',
    templateUrl: '../src/app/UI/accounts.component.html',
    styles: ['p {font-family: Lato;} ']
})
export class AccountsComponent {
    userForm: any;

    constructor(private formBuilder: FormBuilder) {
        this.CreateForm();
    }
    CreateForm() {
        this.userForm = this.formBuilder.group({
            'name': ['', Validators.required],
            'email': ['', [Validators.required]],
            'password': ['', [Validators.required]],
            'confirmPassword': ['', [Validators.required]],
        }, {
            saveUser(): void {
                if (this.userForm.dirty && this.userForm.valid) {
                    //alert(`name' : ${this.userForm.value.name}  'email' : ${this.userForm.value.email}`);            
                    //alert("test");            
                }
            } });
    }
}

And "templateUrl" value corresponds to html file with below sample code:

<div class="container">  <h2>Employee Registration</h2>  <form class="form-horizontal" [formGroup]="userForm" (submit)="saveUser()"><div class="form-group">  <label class="control-label col-sm-2" for="name">Name:</label>  <div class="col-sm-10">  <input class="form-control" formControlName="name" id="name" />  </div>  </div>  <div class="form-group">  <div class="col-sm-offset-2 col-sm-10">  <button type="submit" [disabled]="!userForm.valid" class="btn btn-success">Submit</button>  </div>  </div>  </form>  </div>  

I registered the "AccountsComponent" in "app.module.ts" as below:

    import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  

import { AppComponent } from './app.component';

import { AccountsComponent } from './Component/accounts.component'; 

@NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent, AccountsComponent ],
    bootstrap: [AppComponent, AccountsComponent ]
})
export class AppModule { }

And in the .cshtml view called Create.cshtml i included only the following tag in which corresponds to the selector value assigned in accounts.component.ts:

<app-accounts>Loading...</app-accounts>

When I browse for Create.cshtml, the form created within accounts.component.ts and the associated accounts.component.html doesn't appear in the view, only a <div> containing text as Loading... appears as in the attached screenshot HTML-not-displayed.PNG,

How can I make the accounts.component.html form be displayed within the view, what is going wrong in which stops the accounts.component.html from being displayed in the Create.cshtml view,

Please Advise!!