I have a problem when using ng-bootstrap modal in angular 6.
First, I have 2 module:
AppModule
and ComponentModule
Here is ComponentModule
:
@NgModule({
imports: [
CommonModule,
FormsModule,
ComponentRoutingModule,
BsDropdownModule.forRoot(),
TabsModule,
PaginationModule.forRoot(),
PopoverModule.forRoot(),
ProgressbarModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot(),
NgMultiSelectDropDownModule.forRoot(),
],
declarations: [
CategoryComponent,
CourseComponent,
ModalComponent,
CategoryModalComponent,
],
entryComponents: [CategoryModalComponent],
})
export class ComponentModule { }
ComponentModule
is where I put component that will be displayed after I logged in.
In a ComponentModule
, I have a Course component:
@Component({
selector: 'app-course',
template: '<app-modal></app-modal>',
styleUrls: ['./course.component.scss']
})
export class CourseComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here is ModalComponent
in the same module:
@Component({
selector: 'app-modal',
template: '<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(CategoryModalComponent);
modalRef.componentInstance.name = 'World';
}
ngOnInit() {
}
}
and
@Component({
selector: 'app-category-modal',
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">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`,
styleUrls: ['./category-modal.component.scss']
})
export class CategoryModalComponent implements OnInit {
@Input() name;
constructor(public activeModal: NgbActiveModal) {}
ngOnInit() {
}
}
I expect that when I click button in ModalComponent
, I will show a modal that its content is in CategoryModalComponent
. But it showed me an error:
ModalComponent.html:4 ERROR Error: No component factory found for CategoryModalComponent. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (core.js:3256)
at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3291)
at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._createFromComponent (ng-bootstrap.js:7643)
at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack._getContentRef (ng-bootstrap.js:7581)
at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack.open (ng-bootstrap.js:7444)
According the error, I added it in ComponentModule
but it's not working.
Could you please give any advice to solve it?
Add NgbModalModule or NgbModule to your ComponentModule.
There is no ngb modules in your Components module.
nb: Tried and worked in your case.
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
...
NgbModalModule
],
...
})
export class ComponentModule { }
You should add 'CategoryModalComponent' as the declarations & entryComponent in Module.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.