Angular 6 - http сообщение от bsmodal

Я работаю над своим первым угловым приложением и пытаюсь разместить объект продукта в своем API.

У меня есть компонент, который перечисляет все продукты на указанном API

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { Produto } from '../../models';
import { ProductComponent } from '../../dialogs/product/product.component';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {
  produtos    : Array<Produto>;
  bsModalRef  : BsModalRef;
  loading     : boolean = false;

  constructor(
    private http: HttpClient,
    private toastr: ToastrService,
    private modalService: BsModalService
  ) {}

  ngOnInit() {
    this.getProducts();
  }

  getProducts() {
    this.loading = true;
    this.http.get<Produto[]>(`<apiurl>`)
    .subscribe(
      response => {
        this.produtos = response;
        this.loading = false;
      },
      err => {
        this.toastr.error(err.error.message, 'Erro');
        this.loading = false;
      }
    );
  }

  newProduct() {
    this.bsModalRef = this.modalService.show(ProductComponent, {class: 'modal-lg'});
  }



}

У этого компонента есть кнопка, которая открывает bsmodal для создания и публикации нового продукта - newProduct ()

Вот файлы html и ts для компонента, который обрабатывает это

<form (ngSubmit) = "create()" novalidate #f = "ngForm">
    <div class = "modal-header">
        <h4 class = "modal-title pull-left">Novo produto</h4>
        <button type = "button" class = "close pull-right" aria-label = "Close" (click) = "cancel()">
            <span aria-hidden = "true">&times;</span>
        </button>
    </div>
    <div class = "modal-body">
        <div class = "row">
          <div class = "col-md-6 col-sm-12">
              <div class = "form-group">
                  <label>Nome</label>
                  <input type = "text" name = "nome"  [(ngModel)] = "form.nome" class = "form-control" required>
                  <div class = "invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class = "col-md-6 col-sm-12">
              <div class = "form-group">
                  <label>Preço</label>
                  <input type = "number" name = "preco"  [(ngModel)] = "form.preco" class = "form-control" required>
                  <div class = "invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class = "col-md-6 col-sm-12">
              <div class = "form-group">
                  <label>Altura</label>
                  <input type = "number" name = "altura"  [(ngModel)] = "form.altura" class = "form-control" required>
                  <div class = "invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class = "col-md-6 col-sm-12">
              <div class = "form-group">
                  <label>Largura</label>
                  <input type = "number" name = "largura"  [(ngModel)] = "form.largura" class = "form-control" required>
                  <div class = "invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
          <div class = "col-md-6 col-sm-12">
              <div class = "form-group">
                  <label>Profundidade</label>
                  <input type = "number" name = "profundidade"  [(ngModel)] = "form.profundidade" class = "form-control" required>
                  <div class = "invalid-feedback">Este campo é obrigatório</div>
              </div>
          </div>
        </div>
    </div>
    <div class = "modal-footer">
        <button type = "submit" class = "btn btn-success" [disabled] = "f.invalid">
            <i class = "fa fa-save"></i> Guardar
        </button>
        <button type = "button" class = "btn btn-danger" (click) = "cancel()">
            <i class = "fa fa-times-circle"></i> Fechar
        </button>
    </div>
</form>




import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { Produto } from '../../models/Produto';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-modal-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  form            : Partial<Produto> = {
    nome          : "",
    preco         : 0,
    altura        : 0,
    largura       : 0,
    profundidade  : 0
  }
  canceled : boolean = false;
  constructor(public bsModalRef: BsModalRef, private http: HttpClient, private toastr: ToastrService) { }

  ngOnInit() {
    this.canceled = false;
  }

  create() {
    this.http.post<Produto>(`<apiurl>`, this.form).subscribe(
      response => {
        this.toastr.success('Produto adicionado com sucesso.', 'Sucesso');
        this.bsModalRef.hide();
      },
      err => {
        this.handleError(err);
      }
    );


  }

  cancel() {
    this.canceled = true;
    this.bsModalRef.hide();
  }


  private handleError(err) {
    this.toastr.error(err.error.message, 'Erro');
  }
}

Однако, когда я нажимаю «Сохранить», ничего не происходит, и модальное окно просто зависает. Был бы признателен за любую помощь.