'modal-body' ist kein bekanntes Element eckig 4 ​​

Question

Ich habe meine package.json-Datei aktualisiert und sie hat mein Modal gebrochen. Ich kann jedoch keine Dokumentation zu breaking changes finden. Ich habe mehrere Dinge ausprobiert, aber ohne Erfolg.

import { Component, ViewChild } from '@angular/core'; 
import {ModalComponent} from "ng2-bs3-modal/ng2-bs3-modal" 
@Component({ 
    selector: 'new-office', 
    templateUrl: 'new-office.component.html', 
    styleUrls: ['new-office.component.css'] 
}) 
export class ModalMessageComponent { 
    @ViewChild('myModal') 
    modal: ModalComponent; 

} 

modal:

<button type="button" class="btn-primary pull-right" (click)="myModal.open()"><strong>+</strong></button> 
<modal backdrop="true" keyboard="false" size="sm" class="modalSize" #myModal> 
    <modal-body> 
     <h1> 
      New Office Code 
     </h1> 
     <div> 
      <label for="officeInput" id="officeInputLabel" class="col-sm-2.col-form-label">Office Code:</label> 
      <input type="text" id="officeInput"> 
     </div> 
     <div> 
      <label for="officeSelect" id="officeSelectLabel" class="col-sm-2.col-form-label">Office Code:</label> 
      <select id="officeSelect"> 
       <option value="drew">test</option> 
       <option value="drew">test1</option> 
       <option value="drew">test3</option> 
      </select> 
     </div> 
     <div> 
      <label for="commandInput" id="commandInputLabel" class="col-sm-2.col-form-label">Command Name:</label> 
      <input type="text" id="commandInput"> 
     </div> 
     <div id="buttonGroup"> 
      <button class="btn btn-md btn-primary" (click)="myModal.close()" id="markRead"> Create </button> 
      <button class="btn btn-md btn-primary" (click)="myModal.close()" id="markRead"> Cancel </button> 
     </div> 

    </modal-body> 
</modal> 

Ja, es wird in dem Modul erklärt. Die Fehlermeldung lautet:

1. If 'modal-body' is an Angular component, then verify that it is part of this module. 
2. If 'modal-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (">+</strong></button> 
<modal backdrop="true" keyboard="false" size="sm" class="modalSize" #myModal> 
    [ERROR ->]<modal-body> 
     <h1> 
      New Office Code 
"): ng:///MaintainOfficesModule/ModalMessageComponent.html@2:1 
'modal' is not a known element: 

package.json:

"dependencies": { 
    "@angular-redux/store": "6.5.7", 
    "@angular/animations": "4.3.5", 
    "@angular/common": "4.3.5", 
    "@angular/compiler": "4.3.5", 
    "@angular/core": "4.3.5", 
    "@angular/forms": "4.3.5", 
    "@angular/http": "4.3.5", 
    "@angular/platform-browser": "4.3.5", 
    "@angular/platform-browser-dynamic": "4.3.5", 
    "@angular/router": "4.3.5", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25", 
    "angular-tree-component": "^4.1.0", 
    "bootstrap": "3.3.7", 
    "bootstrap-colorpicker": "2.5.1", 
    "bootstrap-markdown": "2.10.0", 
    "bootstrap-progressbar": "0.9.0", 
    "bootstrap-slider": "9.8.1", 
    "bootstrap-tagsinput": "0.7.1", 
    "bootstrap-timepicker": "0.5.2", 
    "chart.js": "2.6.0", 
    "classlist.js": "^1.1.20150312", 
    "clockpicker": "0.0.7", 
    "clone": "2.1.1", 
    "core-js": "2.5.0", 
    "debounce": "1.0.2", 
    "dropzone": "5.1.1", 
    "dygraphs": "2.0.0", 
    "fuelux": "3.16.1", 
    "hammerjs": "^2.0.8", 
    "he": "1.1.1", 
    "highcharts": "5.0.14", 
    "intl": "^1.2.5", 
    "ion-rangeslider": "2.2.0", 
    "jquery": "3.2.1", 
    "jquery-color": "1.0.0", 
    "jquery-jcrop": "0.9.13", 
    "jquery-knob": "1.2.11", 
    "jquery-ui-npm": "1.12.0", 
    "jquery-validation": "1.17.0", 
    "jquery.maskedinput": "1.4.1", 
    "markdown": "0.5.0", 
    "mdn-polyfills": "^5.0.0", 
    "morris.js": "0.5.0", 
    "ngx-bootstrap": "^1.6.6", 
    "ngx-popover": "0.0.16", 
    "nouislider": "10.1.0", 
    "npm": "^5.3.0", 
    "raphael": "2.2.7", 
    "redux": "3.7.2", 
    "rxjs": "5.4.3", 
    "scriptjs": "2.5.8", 
    "select2": "4.0.3", 
    "smartadmin-plugins": "1.0.20", 
    "to-markdown": "3.1.0", 
    "ts-helpers": "1.1.2", 
    "web-animations-js": "^2.2.5", 
    "zone.js": "0.8.16" 
}, 

Wenn jemand das gleiche Problem bitte teilen aufgetreten. Dieser Beitrag lässt mich nicht posten, weil es zu viel Code gibt, aber ich fühlte es notwendig, einige der package.json Datei zu teilen.

Answer 1

Sie müssen die BsModalModule auf die Einfuhr von NgModule

import { BsModalModule } from 'ng2-bs3-modal'; 

@NgModule({ 
    imports: [ BsModalModule ] 
    ... 
}) 
export class MyAppModule { }