Почему мой модал открывается в фоновом режиме?

Question

Я пытаюсь сделать модальное в моем приложении angular 7, используя ng-bootstrap 4, но модальный компонент продолжает открываться на заднем плане как div, а не как модальный.Что я делаю не так?

это модальный компонент открытия:

import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
import { AddPetModalComponent } from '../add-pet-modal/add-pet-modal.component';
import { Pet } from '../../models/pet';
import { PetsService } from '../../services/pets.service';

@Component({
  selector: 'app-pets-list',
  templateUrl: './pets-list.component.html',
  styleUrls: ['./pets-list.component.less']      
})
export class PetsListComponent implements OnInit {

  petForm: FormGroup;
  pets: Pet[];
  closeResult: string;

  constructor(
    private formBuilder: FormBuilder,
    private petService: PetsService,
    private modalService: NgbModal,
  ) { }

  openFormModal() {
    const modalRef = this.modalService.open(AddPetModalComponent);

    modalRef.result.then((result) => {
      console.log(result);
    }).catch((error) => {
      console.log(error);
    });
  }

модальный компонент:

import { Component, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-add-pet-modal',
  templateUrl: './add-pet-modal.component.html',
  styleUrls: ['./add-pet-modal.component.less']
})
export class AddPetModalComponent implements OnInit {

  constructor(
    public activeModal: NgbActiveModal
  ) { }

  ngOnInit() {
  }

  closeModal() {
    this.activeModal.close('Modal Closed');
  }

}

ссылка на модуль на github: https://github.com/Strzesia/Daily-Rat-Monitor/tree/fix/src/app/pets

Answer 1

Я быстро просмотрел ваш код, и вы, похоже, включили в него все необходимое, но я получил его, хотя без проблем с этим Stackblitz .Некоторые указатели, которые могут вам помочь:

• В вашем app.module вам не хватает entryComponents: [ AddPetModalComponent ], поскольку вы динамически заполняете модал фабрикой компонентов.
• Это может быть минимизированозагрузите CSS, который может вам помешать, попробуйте вначале вставить свой index.html в CDN, как в примере Stackblitz , и посмотрите, поможет ли это.
• удалите ваши node_modules и повторноустановить зависимости

Надеюсь, что некоторые пункты помогут!