NG引导程序模式组件没有提供程序错误

Question

我为角2的ng引导库;特别是我在看：Components as content。我试图将示例代码合并到我的项目中，但收效甚微。我从浏览器调试器中得到的错误是

没有NgbModal的提供者，我在示例代码中没有看到任何东西。我不确定我可以在哪里设置角度2项目来演示悲伤。我想要做的就是拿他们的示例代码，并将其实施到标准项目ng new <projectname>将生成与modile.component.ts和app.component.ts文件。

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> 

错误：无提供NgbModal，错误语境，未处理的承诺拒绝：无提供NgbModal。感谢您的反馈。

Answer 1

你必须导入NgbModule到你的进口排列NgModule。

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

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