Topic: mdbModal Not Working in Angular 8
*Expected behavior*Dialog Box Opens
*Actual behavior*Error in console. The Modal worked fine prior to upgrading to Angular 8. I've tried creating other Modals in the same app and get the same error.
RegisterComponent.html:112 ERROR Error: No component factory found for ModalBackdropComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (core.js:18113) at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:18157) at ComponentLoader.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ComponentLoader.attach (ng-uikit-pro-standard.js:3307) at ModalDirective.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalDirective.showBackdrop (ng-uikit-pro-standard.js:8159) at ModalDirective.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.ModalDirective.show (ng-uikit-pro-standard.js:7943) at TosComponent.push../src/app/public/register/tos/tos.component.ts.TosComponent.showModal (tos.component.ts:14) at Object.eval [as handleEvent] (RegisterComponent.html:112) at handleEvent (core.js:29733) at callWithDebugContext (core.js:30803) at Object.debugHandleEvent [as handleEvent] (core.js:30530)
*Resources (screenshots, code snippets etc.)*I've even tested with the example HTML on mdbootstrap.com and get the same error.
Launch Modal
Discount offer: 10% off ×Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is one of those days.
Copy the following code and use it at the checkout. It's valid for one day.
v52gs1
Get it now No, thanks
Glad it works. Some of the modules need to be imported with the forRoot() method. You can find full list of modules here:
https://mdbootstrap.com/docs/angular/getting-started/modules/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
Please show us the html and ts code you used to render the modal component, we won't be able to help without that.
Did you add
ModalModule.forRoot()(or wholeMDBBootstrapModulesPro.forRoot()) to the imports array in your app.module?danwrevel pro commented 5 years ago
adding forRoot() fixed it. Do all modules need to be imported with forRoot()? This is the first I've needed to use that.