Topic: mdbModal Not Working in Angular 8

danwrevel pro asked 5 years ago


*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

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 whole MDBBootstrapModulesPro.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.


Arkadiusz Idzikowski staff answered 5 years ago


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/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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