Angular отображает пустую страницу
я хочу сделать страницу регистрации на Angular и передать post запрос php скрипту на сервере.
При запуске проекта через команду ng serve --open проект компилируется успешно, но страница в браузере не отображается:

Вот код файла app.component.ts:
import { Component } from '@angular/core';
import { HttpService} from './http.service';
import {User} from './user';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule ], // HERE
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
@Component({
selector: 'registration',
template:`<div class="container my-5">
<h3> Registration</h3>
<div class="card">
<div class="card-body">
<div class="col-md-10">
<form action="/createUser" method="post">
<div class="row">
<div class="form-group col-md-8">
<input type="text" class="form-control"
id="firstName" name="firstName" placeholder="First Name" [(ngModel)]="user.firstName" />
<br>
<input type="text" class="form-control"
id="secondName" name="secondName" placeholder="Second Name" [(ngModel)]="user.secondName" />
<br>
<input type="text" class="form-control"
id="email" name="email" placeholder="Email" [(ngModel)]="user.email" />
<br>
<input type="text" class="form-control"
id="login" name="login" placeholder="Login" [(ngModel)]="user.login" />
<br>
<input type="text" class="form-control" id="password" name="password" placeholder="Password" [(ngModel)]="user.password" />
<br>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" [(ngModel)]="user.phone"/>
<br>
</div>
<div class="col-md-6">
<input type="submit" class="btn btn-primary" value=" Submit " (click)="submit(user)">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div *ngIf="done">
<div>Получено от сервера:</div>
<div>Имя: {{receivedUser.firstName}}</div>
<div>Фамилия: {{receivedUser.secondName}}</div>
<div>Емейл: {{receivedUser.email}}</div>
<div>Логин: {{receivedUser.login}}</div>
<div>Пароль: {{receivedUser.password}}</div>
<div>Телефон: {{receivedUser.phone}}</div>
</div>`,
providers: [HttpService]
})
export class AppComponent {
title = 'registration3';
user: User=new User(); // данные вводимого пользователя
receivedUser: User; // полученный пользователь
done: boolean = false;
constructor(private httpService: HttpService){}
submit(user: User){
this.httpService.postData(user)
.subscribe(
(data: User) => {this.receivedUser=data; this.done=true;},
error => console.log(error)
);
}
}
Код файла user.ts:
export class User{
firstName: string;
secondName: string;
email: string;
login: string;
password: string;
phone: string;
}
Код файла http.service.ts:
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {User} from './user';
@Injectable()
export class HttpService{
constructor(private http: HttpClient){ }
postData(user: User){
const body = {firstName: user.firstName, secondName: user.secondName,email:user.email,login:user.login,password:user.password,phone:user.phone};
return this.http.post('http://localhost:8080/postForAngular/', body);
}
}
Код файла index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration3</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<registration></registration>
</body>
</html>
Помогите, пожалуйста, разобраться с проблемой.