Дизайн PrimeNg ConfirmDialog испорчен, CSS не применяется

Шаблон :

<p-confirmDialog  header = "Confirmation" icon = "fa fa-question-circle" appendTo = "body" responsive = "true"></p-confirmDialog>

<button type = "button" class = "btn btn-primary" (click) = "confirm()" >Save</button>

Составная часть:

  confirm() {
    console.info('confirm?');
    this.confirmationService.confirm({
        message: 'Are you sure that you want to update?',
        accept: () => {
             console.info('update clicked');
        } 
    });    
}

Дисплей вывода:

Есть ли какой-либо файл css и т. д., Который мне нужно включить?

Шаблон (полный):

<!---------------- Meta and Title ---------------->


<meta charset = "utf-8">
<title>Solid Waste Management System</title>

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">




<div class = "tables-basic" data-spy = "scroll" data-target = "#nav-spy" data-offset = "300">


  <!-- -------------- Body Wrap  -------------- -->
  <div id = "main">
    <p-confirmDialog header = "Confirmation" icon = "fa fa-question-circle" appendTo = "body" responsive = "true"></p-confirmDialog>
    <!-- -------------- Topbar -------------- -->
    <header id = "topbar" class = "alt">
      <div class = "topbar-left">
        <ol class = "breadcrumb">
          <li class = "breadcrumb-icon">
            <a href = "#">
              <span class = "fa fa-eye"></span>
            </a>
          </li>
          <li class = "breadcrumb-active">
            <a href = "#">Organizational User</a>
          </li>

        </ol>
      </div>
      <div class = "topbar-right">
        <a class = "btn btn-primary btn-sm" href = "Edit.html">
          <i class = "fa fa-edit"></i> Edit
        </a>
        <a class = "btn btn-dark btn-sm" href = "UserList.html">
          <i class = "fa fa-arrow-left"></i> Back
        </a>
      </div>

    </header>
    <!-- -------------- /Topbar -------------- -->

    <!-- -------------- Content -------------- -->
    <section id = "content" class = "table-layout animated fadeIn">

      <!-- -------------- Column Center -------------- -->
      <div class = "chute chute-center">
        <div class = "row">
          <div class = "col-md-6 col-md-offset-3">
            <div class = "panel panel-visible p10">

              <div class = "panel-body pn mn allcp-form theme-primary">
                <form id = "form-order" (ngSubmit) = "onSubmit(f)" #f = "ngForm">
                  <h6>OrgUser</h6>

                  <div class = "section row ">


                  </div>
                  <!-- -------------- /section -------------- -->



                  <div class = "section row">
                    <div class = "col-md-6 ph10 mb5">
                      <label for = "userid">User ID: </label>

                      <p-autoComplete (ngModelChange) = "orguser.userid = $event" class = "ui-autocomplete autocomplete" [suggestions] = "results" (completeMethod) = "search($event)"
                        (onSelect) = "onSelect($event)" (onBlur) = "onBlur($event.target.value)" field = "userid"></p-autoComplete>
                      <input type = "hidden" name = "userid" [ngModel] = "orguser?.userid">


                    </div>
                    <div class = "col-md-6 ph10 mb5">
                      <label for = "perid">Personnel ID:</label>
                      <input type = "text" class = "form-control" [ngModel] = "orguser?.perid" (ngModelChange) = "orguser.perid = $event" name = "perid"
                        id = "perid">
                    </div>
                  </div>


                  <div class = "section row">
                    <div class = "col-md-6 ph10 mb5">
                      <label for = "Password">Password:</label>
                      <input type = "text" class = "form-control" [ngModel] = "orguser?.password" (ngModelChange) = "orguser.password = $event" name = "password"
                        id = "password">
                    </div>
                    <div class = "col-md-6 ph10 mb5">
                      <label for = "fullname">Name:</label>
                      <input type = "text" class = "form-control" name = "fullname" disabled [ngModel] = "orguser?.perfullname" (ngModelChange) = "orguser.perfullname = $event"
                        id = "fullname">
                    </div>
                  </div>



                  <div class = "section row">
                    <div class = "col-md-6 ph10 mb5">
                      <label for = "type">CreatedOn:</label>
                      <input type = "text" class = "form-control" name = "createdon" disabled [ngModel] = "orguser?.createdon" (ngModelChange) = "orguser.createdon = $event"
                        id = "createdon">
                    </div>

                    <div class = "col-md-6 ph10 mb5 ">
                      <label for = "CreatedBy ">CreatedBy:</label>
                      <input type = "text" class = "form-control" name = "createdby" disabled [ngModel] = "orguser?.createdby" (ngModelChange) = "orguser.createdby = $event"
                        [(ngModel)] = "orguser.createdby" id = "createdby">

                    </div>
                  </div>

                  <div class = "section row">
                    <div class = "col-md-6 ph10 mb5">
                      <label for = "Deletedby">Deleted By:</label>
                      <input type = "text" class = "form-control" disabled name = "Deletedby" id = "Deletedby">

                      <div class = "col-md-6 ph10 mb5">
                        <label for = "isactive">IsActive:</label>
                        <input type = "checkbox" id = "isactive" [ngModel] = "orguser?.isactive" (ngModelChange) = "orguser.isactive = $event" name = "isactive">
                      </div>
                    </div>


                    <div class = "section row">

                      <div class = "col-md-6 ph10 mb5">
                        <label for = "isdeleted">Is Deleted:</label>
                        <input type = "checkbox" id = "isdeleted" [ngModel] = "orguser?.isdeleted" (ngModelChange) = "orguser.isdeleted = $event" name = "isdeleted">
                      </div>
                    </div>
                  </div>
                  <!-- -------------- /section -------------- -->

                  <hr>

                  <!-- -------------- /section -------------- -->

                  <div class = "section text-right mb10 ">

                    <button type = "button" class = "btn btn-primary" (click) = "confirm()">Save</button>

                  </div>
                  <!-- -------------- /Panel Body -------------- -->

                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- -------------- /Column Center -------------- -->
    </section>
    <!-- -------------- /Content -------------- -->
  </div>


</div>

Компоненет (полный):

import { Component, OnInit, ViewChild } from '@angular/core';
import { orguser } from '../../Models/orguser';
import { PersonnelService } from '../../services/personnel.service';
import { OrguserService } from '../../services/orguser.service';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';

@Component({
  selector: 'app-orguseraddedit',
  templateUrl: './orguseraddedit.component.html',
  styleUrls: ['./orguseraddedit.component.css'],

})
export class OrguseraddeditComponent implements OnInit {
  orguser: orguser = new orguser();

  val: any;
  results: any[];

  constructor(private _PersonnelService: PersonnelService, private _OrguserService: OrguserService,private confirmationService: ConfirmationService) {

  }

  confirm() {
    console.info('confirm?');
    this.confirmationService.confirm({
        message: 'Are you sure that you want to update?',
        accept: () => {
             console.info('update clicked');
        } 
    });


}

confirm1() {
  this.confirmationService.confirm({
      message: 'Are you sure that you want to Add?',
      accept: () => {
           console.info('add clicked');
      },
     key:"add"
  });
}


  search(event) {
    this._OrguserService.GetOrgUsersForAutocomplete(event.query)
      .subscribe((userdata: any[]) => { this.results = userdata;console.info('xxxx'); console.info(this.results); }, (error) => {
        //this.statusMessage = 'Problem with service. Please try again.'
        console.error(error);
      });

  }
  handleDropdown(event) {
    console.info(event.query);
    //event.query = current value in input field
  }

  ngOnInit() {
    //this.orguser=null;

  }

  onBlur(value){
    this._OrguserService.selectOrgUsersById(value)
      .subscribe((userdata: any[]) => { this.orguser = userdata[0]; }, (error) => {
        console.error(error);
      });
  }
  onSelect(value) {
    this.getuser(value.userid);
  }

  getuser(value){
    this._OrguserService.selectOrgUsersById(value)
    .subscribe((userdata: any[]) => { this.orguser = userdata[0]; console.info(this.orguser); }, (error) => {
      console.error(error);
    });
  }
  onSubmit(f) {


    this._OrguserService.addupdateOrguser(f.value)
    .subscribe((res: any) => {
      console.info(res);
    this.orguser = res;
      { console.info('success'); this.getuser(f.value.userid); };
    }, (error) => {
      console.error(error);
    });


  }

}
interface IAutoCompleteItem {
  value: any;
  text: string;
  markup?: string;
  isFocus?: boolean;
}

После удаления всех ссылок на таблицы стилей и всего остального в шаблоне я получаю следующее: