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>

Помогите, пожалуйста, разобраться с проблемой.


Ответы (0 шт):