'modal-body'は既知の要素ではありません4

Question

私のpackage.jsonファイルをアップグレードしましたが、それは私のモーダルを壊しました。しかし、私はbreaking changesに関する文書を見つけることができません。私はいくつかのことを試みましたが、無駄です。

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; 

} 

モーダル：

<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> 

はい、それは、モジュール内で宣言されています。エラーメッセージが読み：

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" 
}, 

を、誰もが同じ問題を共有してくださいが発生した場合。多くのコードがあるのでこの投稿は私に投稿させませんが、package.jsonファイルのいくつかを共有する必要があると感じました。

Answer 1

あなたはNgModuleの輸入にBsModalModuleを追加する必要が

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

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