title: NG-bootstrap Modal Component no provider error
body: <p>I the ng-bootstrap library for angular 2; in particular i am looking at: <a href="https://ng-bootstrap.github.io/#/components/modal" rel="noreferrer">Components as content</a>. I've tried to incorporate the example code into my project with very little success. The error i get from the browser debugger is</p>
  
  <p>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 <code>ng new &lt;projectname&gt;</code> will generate with <code>modile.component.ts</code> and <code>app.component.ts</code> files.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Tour of Heroes';
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>  &lt;div class="container-fluid"&gt;
      &lt;hr&gt;
      &lt;p&gt;
        This is a demo plnkr forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
        Visit &lt;a href="https://ng-bootstrap.github.io/" target="_blank"&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more widgets and demos.
      &lt;/p&gt;
      &lt;hr&gt;
  
      &lt;ngbd-modal-component&gt;&lt;/ngbd-modal-component&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>modal.component.ts</strong></p>
  
  <pre><code>import {Component, Input} from '@angular/core';
  
  import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'ngbd-modal-content',
    template: `
      &lt;div class="modal-header"&gt;
        &lt;h4 class="modal-title"&gt;Hi there!&lt;/h4&gt;
        &lt;button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"&gt;
          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;Hello, {{name}}!&lt;/p&gt;
      &lt;/div&gt;NgbdModalComponent
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    `
  })
  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';
    }
  }
  </code></pre>
  
  <p><strong>modal.component.html</strong></p>
  
  <pre><code>&lt;p&gt;You can pass an existing component as content of the modal window. In this case remember to add content component
  as an &lt;code&gt;entryComponents&lt;/code&gt; section of your &lt;code&gt;NgModule&lt;/code&gt;.&lt;/p&gt;
  
  &lt;button class="btn btn-lg btn-outline-primary" (click)="open()"&gt;Launch demo modal&lt;/button&gt;
  </code></pre>
  
  <p><strong>The ERRORs</strong>: No provider for NgbModal, Error Context, Unhandled Promise rejection: no provider for NgbModal. Thanks for the feedback.</p>