An Error occurred: Unable to resolve all parameters for 'ComponentName': ([object Object], ?)

I am encountering an error that I can't seem to figure out.

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

I've been attempting to utilize ngbModal and here's my progress 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"
    ]

Seeking assistance! Feel free to ask if more clarification is necessary.

Answer №1

To properly integrate it into your NgModule, consider importing it rather than injecting it directly into your component.

import { ModalModule } from 'ngb-modal';

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

Do not include private modalService: NgbModal in the constructor:

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

Instead, replace it with 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();
    }
}

For more information, visit: https://www.npmjs.com/package/ngb-modal

Answer №2

Ensure your dialog component is included in the entryComponents array within your module setup.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to successfully update DIV content in JavaScript due to incorrect file path specified

I came across this code online and it seems to be functioning properly. However, no matter what name I give the file that is supposed to load into the DIV, I consistently receive an error message stating "Object was not found." What specific steps do I nee ...

What is the best way to save data in MONGO DB with Java programming language?

Creating a blog post feature in my web application has been an interesting journey. Initially, I relied on mysql as the database to store the posts entered in the text area of the blog as an object in JavaScript. The process involved sending this object to ...

Ways to verify if one div in jQuery contains identical text to another div

I need help with a jQuery script to remove duplicate text in div elements Here's the requirement: If div1 contains the text "hi" and div2 also contains "hi", then div2 should be removed Below is my current code snippet: <script src="https:/ ...

The issue with the dispatch function not working in the Component props of React Redux

I'm struggling with my colorcontrol issue. I've been attempting to use this.props.dispatch(triggerFBEvent(fbID, method, params)) without success. Interestingly, it seems to work fine if I just use triggerFBEvent(fbID, method, params). However, I ...

Using Jquery to reset the form I have filled out

I am facing an issue with my forms. I have 2 form input fields and 1 select form. When I select option A from the select form, one of the input fields should hide and automatically reset/clear. I have successfully implemented the hide logic, but unable to ...

Discover exclusive outcomes within the Dropdown selection

I'm populating a select dropdown dynamically from a JSON array of objects and would like to filter by tag. The issue I'm facing is that I am getting duplicate tags because multiple results can have the same tag. How can I ensure that only unique ...

Transform a list of time slots into a time interval using Angular (2/4/5/6)

Hello everyone! Just wanted to share my updated solution after considering your feedback. Thank you! getTime(apptTime) { const fields = apptTime.split("-"); const startingTime = this.formatTime(+fields[0]); const endingTime = this.formatTime(+fie ...

Getting latitude and longitude from Google Maps in a React Native appHere are the steps to

Looking to retrieve the latitude and longitude from Google using React Native. As a newcomer to React Native, I have been unable to find any resources to address this issue. Any assistance would be greatly appreciated. Thanks! Thanks ...

What is the best way to showcase several items in a slide with Ionic 2?

I am a beginner with Ionic 2 and I am trying to display multiple products in a single slide. While I have successfully displayed the slide, I am seeing small dots below the image. How can I remove these dots? Below is my HTML code: <ion-row class="bran ...

Swipe to modify Array

Currently, I am in the process of developing an application that features a Swipe card interface using both AngularJS and the Ionic framework. The functionality of this app will be similar to the one found at . When swiping to accept a card, I want the ar ...

Tips for displaying a popup modal when a link is clicked with ajax technology

I am facing an issue with my popup modal. When a user clicks on a link, the modal appears but without any content. I am new to ajax and feeling a bit confused about what steps to take next. Below is the HTML code snippet: <div class="modal fade&quo ...

suggestions for organizing data in an AJAX/jQuery page

Welcome to my JavaScript/Ajax webpage that also utilizes jQuery. I am facing a challenge with displaying a nested structure. Once a top level element is displayed, users should be able to click on it and reveal the levels below (which are dynamically gene ...

Struggling to retrieve data with arrow function in Vue

I'm currently learning Vue and facing an issue with fetching data from an API to my component. I have a service class that successfully retrieves data from the API, as the API itself is working fine. Here's the code snippet: import IReview from & ...

I'm a beginner in learning javascript and I'm struggling to fix this code. Can someone please help me?

I can't figure out why the code isn't functioning properly. It was supposed to display the number of clicks on the button in the console each time it is clicked. //Below is the code let JoinButton = document.getElementById("join-button&quo ...

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...

What is the TypeScript term for assigning multiple parameters an alias?

Imagine having a piece of code structured like this: export async function execute(conf: Record<string, string>, path: string, params: Array<string>) { const cmd = params[1]; const commandOption = params.slice(2) switch(cmd){ ...

Is there any potential security vulnerability when using ActiveRecord::Serialization.from_json() in RoR to parse uploaded JSON?

Currently in the process of setting up an export-import feature in Ruby on Rails. I have been contemplating the possibility of malicious code injection since JSON has the capability to include JavaScript. Is there a risk that someone could inject harmful ...

trigger the focusout event within the focusin event

I am attempting to trigger the focusout event within the focusin event because I need to access the previous value from the focusin event, but the focusout event is being triggered multiple times. $('tr #edituser').focusin(function(){ var ...

Tips for incorporating images into AngularJS applications

Just starting out with angular js. I've run into an issue. I'm working with a json for my data and I'm unsure about how to incorporate images into my code <div ng-controller="myCtrl" class="container"> <div class="col-md-8"&g ...

Having issues debugging in the browser as React seems to be undefined

I am trying to implement a Context system to store the login user's name and use it for protected routes. context.js import React from 'react'; const axios = require('axios'); export const AuthContext = React.createContext(null); ...