Angular – ng-bootstrap and Angular 6: Can’t resolve all parameters for NgbModalRef: (?,?,?,?)

angularng-bootstrap

Has anyone used ng-bootstrap and come across the following error with angular 6

console window

I have included 

imports:[NgbModule]
providers: [NgbModule, NgbModalRef]

in the app.module.ts file

inside my ts component file i have imported 

import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";

 constructor(private formBuilder: FormBuilder,
        private modalService: NgbModal,
        private activeModel: NgbModalRef,
        private readonly resourceService: ResourceService,
        private readonly authService: AuthService,
        private readonly userService: UserService,
        private readonly competitionService: CompetitionService){}

open(content: any, modal?: ICompetition) {
        if (modal == undefined) {
            this.competitionFrm.setValue({
                competitionKey: null,
                centre: this.user.Centre,
                programme: "",
                competitionName: ""
            });
            this.activeModel = this.modalService.open(content,{ ariaLabelledBy: "modal-basic-title", backdrop: "static", keyboard: false });
            this.activeModel.result.then((result) => {
                    this.closeResult = `Closed with: ${result}`;
                },
                    (reason) => {
                        this.closeResult = `Dismissed with: ${reason}`;
                    });
        } else {
            this.competitionFrm.setValue({
                competitionKey: modal.competitionKey,
                centre: modal.centre,
                programme: modal.programme,
                competitionName: modal.competitionName
            });
        }
    }

saveDetails(model: any): void {
        this.competitionService.save(model).subscribe(
            data => {
                if (data.Successful === false) {
                    this.modelMsg = data.Information;
                } else {
                    this.msg = data.Information;
                    this.getCompetitions();
                    this.activeModel.close();
                }

            },
            error => this.msg = <any>error);
    }

does anyone have any knowledge as to the error that is being displayed in the browsers console window. I have seen some other issues from a while ago saying this was solved back in 2017 however the issue still seems to be there.

The purpose for this is to close the open modal from inside the save function.

Many thanks in advance

Lewis

UPDATE: app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CommonModule, APP_BASE_HREF } from "@angular/common";
import { MatIconModule, MatFormFieldModule, MatSelectModule, MatDialogModule, } from "@angular/material";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule, NgbActiveModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';


import { AppComponent } from "./app.component";
import { FooterComponent } from "./components/footer/footer.component";
import { HeaderComponent } from "./components/header/header.component";
import { NavBarComponent } from "./components/NavBar/navbar.component";
import { HomeComponent } from "./components/home/home.component";
import { AccountManagementComponent } from "./components/accountManagement/accountManagement.component";
import { CompetitionManagementComponent } from "./components/competitionManagement/competitionManagement.component";

import { appRoutingModule } from "./app.routing";
import { UserService } from "./Service/user.service";
import { LoginService } from "./Service/login.service";
import { AuthService } from "./Service/auth.service";
import { ResourceService } from "./Service/resource.service";
import { CompetitionService } from "./Service/competition.service";


@NgModule({
  declarations: [
      AppComponent,
      FooterComponent,
      HeaderComponent,
      NavBarComponent,
      HomeComponent,
      AccountManagementComponent,
      CompetitionManagementComponent
  ],
    imports: [
      NgbModule.forRoot(),
      BrowserModule,
      appRoutingModule,
      MatIconModule,
      MatFormFieldModule,
      MatSelectModule,
      MatDialogModule,
      ReactiveFormsModule,
      FormsModule,
      CommonModule,
      BrowserAnimationsModule,
      HttpClientModule
  ],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, LoginService, AuthService, ResourceService, CompetitionService, NgbModule, NgbModalRef],
    bootstrap: [AppComponent],
    entryComponents: [AccountManagementComponent]
})
export class AppModule { }

Best Answer

So the solution to this is not to use NgbModalRef but to use NgbActiveModal with the suggestions that the guys above have suggested.

Within the app.module.ts file you need to ensure that all components that contain a modal are within the entryComponents options and NgbModule.forRoot() in the imports options. 

@NgModule({
    imports: [
        NgbModule.forRoot()
    ],
    entryComponents: [
        AccountManagementComponent, 
        CompetitionManagementComponent
    ]
})

Within the component you need to import NgbActiveModal

import {NgbModal, NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";

and then create a variable 

activeModal: NgbActiveModal;

Create a function that will act as your open()

open(content: any) {
    this.activeModal = this.modalService.open(content,{ ariaLabelledBy: "modal-basic-title", backdrop: "static", keyboard: false });
}

In our case we have a form in the modal so this needs to save and then if the save is successful it will close the modal and display a msg on the main page.

save(model: any): void {
        this.dbService.save(model).subscribe(
            data => {
                if (data.Successful === false) {
                    this.modelMsg = data.Information;
                } else {
                    this.msg = data.Information;
                    this.activeModal.close();
                }

            },
            error => this.msg = <any>error);
    }

I hope this helps others that come across this issue.

Related Topic