I dont know why I am getting the error

piler.js:2175 Uncaught Error: Can't resolve all parameters for ClauseListComponent: ([object Object], ?).
at syntaxError (piler.js:2175)
at CompileMetadataResolver._getDependenciesMetadata (piler.js:20399)
at CompileMetadataResolver._getTypeMetadata (piler.js:20294)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (piler.js:19923)
at CompileMetadataResolver._getEntryComponentMetadata (piler.js:20494)
at piler.js:20486
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getEntryComponentsFromProvider (piler.js:20485)
at piler.js:20456
at Array.forEach (<anonymous>)

I am trying to use ngbModal and here is what i have done so far.

clause.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [ModuleListComponent,ClauseListComponent,ModifyClauseComponent],
  imports: [
    NgbModule

clauselist.html

<ng-template #content let-modal >
    <div class="modal-header">
        <h4 class="h4Header" id="modal-basic-title">Title</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="modal-body">
                        CheckMate!     
    </div>
    <div class="modal-footer">
        <button mat-flat-button class="text-btn" (click)="modal.close('Save click')">ENROLL NOW</button> 
        <button mat-flat-button class="text-btn" (click)="modal.close('Save click')">Later</button> 
    </div>
</ng-template>
<button mat-flat-button class="primary-btn marR16" (click)="open(content)">Modal dialog</button>

and .ts file

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

constructor(private service : OfferClauseService,private modalService: NgbModal) { }
 open(content) {
    this.modalService.open(content,{windowClass:'custom_modal'})
  }

tsconfig

    "lib": [
      "es2018",
      "dom"
    ]

Counting on ya'll! Please ask if any more clarification is needed.

I dont know why I am getting the error

piler.js:2175 Uncaught Error: Can't resolve all parameters for ClauseListComponent: ([object Object], ?).
at syntaxError (piler.js:2175)
at CompileMetadataResolver._getDependenciesMetadata (piler.js:20399)
at CompileMetadataResolver._getTypeMetadata (piler.js:20294)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (piler.js:19923)
at CompileMetadataResolver._getEntryComponentMetadata (piler.js:20494)
at piler.js:20486
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getEntryComponentsFromProvider (piler.js:20485)
at piler.js:20456
at Array.forEach (<anonymous>)

I am trying to use ngbModal and here is what i have done so far.

clause.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [ModuleListComponent,ClauseListComponent,ModifyClauseComponent],
  imports: [
    NgbModule

clauselist.html

<ng-template #content let-modal >
    <div class="modal-header">
        <h4 class="h4Header" id="modal-basic-title">Title</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="modal-body">
                        CheckMate!     
    </div>
    <div class="modal-footer">
        <button mat-flat-button class="text-btn" (click)="modal.close('Save click')">ENROLL NOW</button> 
        <button mat-flat-button class="text-btn" (click)="modal.close('Save click')">Later</button> 
    </div>
</ng-template>
<button mat-flat-button class="primary-btn marR16" (click)="open(content)">Modal dialog</button>

and .ts file

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

constructor(private service : OfferClauseService,private modalService: NgbModal) { }
 open(content) {
    this.modalService.open(content,{windowClass:'custom_modal'})
  }

tsconfig

    "lib": [
      "es2018",
      "dom"
    ]

Counting on ya'll! Please ask if any more clarification is needed.

• javascript
• angular
• typescript
• bootstrap-modal
• angular-ponents

• Where/how is OfferClauseService defined? – Michael Commented Dec 9, 2019 at 14:25
• @MenimE did you solve it? – Rafael Guimarães Commented Jan 28, 2020 at 18:37
• @Michael can you help me I am getting this error too. with angular 7.2.0 – Rafael Guimarães Commented Jan 28, 2020 at 18:37
• @RafaelGuimarães unfortunately I couldnt figure it out. I did not use Ngbmodal – MenimE Commented Jan 29, 2020 at 7:48
• Hi, I solve it when I change to a high version from angular/piler. – Rafael Guimarães Commented Jan 29, 2020 at 21:21

2 Answers 2

You need to import it in your NgModule instead of injecting it in your ponent.

import { ModalModule } from 'ngb-modal';

@NgModule({
  imports: [
    ...
    ModalModule,
  ],

Remove private modalService: NgbModal from the constructor:

constructor(private service : OfferClauseService,private modalService: NgbModal) { }

And instead add ModalManager:

export class YourComponent {
    @ViewChild('myModal') myModal;
    private modalRef;
    constructor(private modalService: ModalManager){}

    openModal(){
        this.modalRef = this.modalService.open(this.myModal, {
        ...
        })
    };
    ...

    closeModal(){
        this.modalService.close(this.modalRef);
        //or this.modalRef.close();
    }
}

Reference: https://www.npmjs./package/ngb-modal

You need to add your dialog ponent into entryComponents in your module.

@NgModule({
  declarations: [
    AppComponent, ModalComp
  ],
  imports: [
    ...
    ModalModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ModalComp]
})