NG-bootstrap Modal Component no provider error

Question

I the ng-bootstrap library for angular 2; in particular i am looking at: Components as content. I've tried to incorporate the example code into my project with very little success. The error i get from the browser debugger is

No provider for NgbModal, i didn't see anything in the example code that had. I am not sure where i can setup an angular 2 project to demo sadly. All i wanted to do was take their example code and implement it into the standardly project that ng new <projectname> will generate with modile.component.ts and app.component.ts files.

app.module.ts

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent }        from './app.component';
import { NgbdModalComponent, NgbdModalContent } from './modal.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    NgbdModalComponent, NgbdModalContent
  ],
  entryComponents: [NgbdModalContent],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.html

  <div class="container-fluid">
    <hr>
    <p>
      This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
      Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
    </p>
    <hr>

    <ngbd-modal-component></ngbd-modal-component>
  </div>

modal.component.ts

import {Component, Input} from '@angular/core';

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

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>NgbdModalComponent
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal.component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

modal.component.html

<p>You can pass an existing component as content of the modal window. In this case remember to add content component
as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

The ERRORs: No provider for NgbModal, Error Context, Unhandled Promise rejection: no provider for NgbModal. Thanks for the feedback.

score 8 · Accepted Answer · answered May 27 '17 at 01:12

8

you have to import NgbModule to your imports array of NgModule.

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

@NgModule({
  ...
  imports: [NgbModule.forRoot(), ...],
  ...
})
export class AppModule {
}

answered May 27 '17 at 01:12

Pengyy

37,383
15
83
73

i feel stupid, this is what i get for making a new project to test out modal :( Sorry. Idk if i should delete the question now or not. – JordanGS May 27 '17 at 01:15
just wondering but i need two modals, do i just replicate everythign twice? – JordanGS May 27 '17 at 01:25
@JordanGS that denpends on you. you can just consider them as normal components. :-) – Pengyy May 27 '17 at 01:31
The problem i'm having is that if i change the selector ngbd-modal-content to anything else, i get an error when trying to build, which is preventing me from creating additional components. – JordanGS May 27 '17 at 01:56
2

@JordanGS you can post a new question and I think there are a ton of guys waiting for helping you solve the problem. – Pengyy May 27 '17 at 02:05
i figured it out, i was using the wrong naming convention :) Thanks mate, have a goodnight ^^ – JordanGS May 27 '17 at 02:14
Property 'forRoot' does not exist on type 'typeof NgbModule' – Hikaru Shindo Jul 22 '21 at 08:48

score 7 · Answer 2 · edited Jun 08 '21 at 09:43

7

try to provide NgbActiveModal on components

providers: [
    NgbActiveModal,
]

edited Jun 08 '21 at 09:43

Slava Rozhnev

9,510
6
23
39

answered Jun 07 '21 at 21:24

E.Sene

71
1
2

score 1 · Answer 3 · answered May 18 '18 at 07:32

Just in case you use lazy loading. Its important to into NgbModule into the imports array as well. But this time not as @Pengyy said, but

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

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class LazyLoadedModule {
}

NG-bootstrap Modal Component no provider error

3 Answers3

Linked