angular - ModalComponent のプロバイダーがありません

Question

私は角度の初心者なので、この質問はばかげています。私たちのアプリケーションでは、すべてのフォームがポップアップで表示されます。ヘッダー セクションにはいくつかのタブがあり、タブをクリックするとコンポーネントをロードする必要があります。以下のコードを調べて、コードの問題点を提案してください。

モーダル ビュー

<modal (dismissPopup)="dismiss($event)" #myModal [keyboard]="false" [cssClass]="'my-modal'" [backdrop]="'static'">
<modal-header [show-close]="true">
    <div class="modal-header">
        <div class="col-md-12" style="top:-7px;left:0px;padding-left:0px;">
            <!-- Nav tabs --><div class="card">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active tab-content"><a class="popup-tab completed" id="lnkCounterParty" href="#"><span class="fa fa-university"></span> Counterparty <span class="fa fa-check-circle-o" style="font-size:13px;vertical-align:super;"></span></a></li>
                    <li role="presentation" class="tab-content"><a class="popup-tab" id="lnkParticipant" href="#"><span class="fa fa-users"></span>Participant</a></li>

                </ul>
            </div>
        </div>
    </div>
</modal-header>
<div class="clear"></div>
<cpdb-counterparty (dismissPopup)="dismiss($event)"></cpdb-counterparty>

モーダル コンポーネント

@Component({
   selector: 'cpdb-modal-popup',
    templateUrl: 'app/modalPopup/modalPopup.component.html'
})


export class modalPopupComponent {
@ViewChild('myModal')

modal: ModalComponent;

constructor(private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef) {
}

openCounterpartyAddress() {
    debugger;
    const factory = this.componentFactoryResolver.resolveComponentFactory(addressComponent);
    const ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
}

open() {
    this.modal.open();
}

close() {
    this.modal.close();
 }

}

上記のコード スニペットはモーダル ポップアップ用です

タブ 1 ビュー

<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit(AddressForm.valid)">
<modal-body>
    <div class="container-fluid fundmodal">
        <!-- Search Panel -->

    </div>

</modal-body>
<modal-footer>
    <button type="button" class="btn btn-default" data-dismiss="modal" (click)="resetForm()">Cancel</button>
    <button type="submit" [disabled]="!counterPartyForm.valid" class="btn btn-primary">Submit</button>
</modal-footer>

タブ 1 Component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core'
import { FormControl, FormGroup, Validators } from '@angular/forms'

@Component({
selector: 'cpdb-address',
templateUrl: 'app/address/address.component.html',
outputs: ['dismissPopup']


})

export class addressComponent {
addressForm = new FormGroup({

});

//constructor(private helloWorldService: HelloWorldService) {
//}

ngAfterViewInit(): void {

}

//private getAnswer() {
//    return this.helloWorldService.giveMeTheAnswer();
//}

onSubmit(isFormValid: boolean) {
}

resetForm() {
    this.addressForm = new FormGroup({

    });

}

}

タブ ビュー 2

<form [formGroup]="addressForm" novalidate 
(ngSubmit)="onSubmit(AddressForm.valid)">
<modal-body>
    <div class="container-fluid fundmodal">
        <!-- Search Panel -->

    </div>

</modal-body>
<modal-footer>
    <button type="button" class="btn btn-default" data-dismiss="modal" (click)="resetForm()">Cancel</button>
    <button type="submit" [disabled]="!counterPartyForm.valid" class="btn btn-primary">Submit</button>
</modal-footer>

タブ 2 コンポーネント

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'

@Component({
  selector: 'cpdb-counterparty',
  templateUrl: 'app/counterparty/abc.component.html',
  outputs: ['dismissPopup']
})

export class counterPartyComponent {

dismissPopup = new EventEmitter<string>();

public submitted: boolean;
public IsSeiClient: boolean = false;



onSubmit(isFormValid: boolean) {
    if (isFormValid) {
        console.log(this.counterPartyForm.value);
    }
    else {
        this.submitted = true;
    }
}



resetForm() {
    this.counterPartyForm = new FormGroup({

    });

}

}

app.module.ts

@NgModule({
imports: [BrowserModule, Ng2Bs3ModalModule, ReactiveFormsModule],
declarations: [AppComponent, tab1Component, tab2Component],
bootstrap: [AppComponent],
entryComponents: [addressComponent],
providers: [
    {
        provide: ErrorHandler,
        useClass: GlobalErrorHandler
    }
]

}))