Topic: Angular Pro - ERROR - no directive with exportAs set to mdb-modal

garland.jake pro asked 4 years ago


I have just upgraded to the latest version of Angular Pro. My modals worked perfectly yesterday but now when I 'ng serve' the application fails with this error message. When I remove the ="mdb-modal" part, then the application loads but of course the modal doesn't work. I saw another post suggesting the replacement of mdb-modal with bs-modal, this did not work either.   How do I fix this issue?    

Dawid Adach pro commented 4 years ago

Dear Jake, please provide us with more input, which version you had before? Could you also please send us exact error and sample code?

Ian Worthington free answered 4 years ago


Just FYI, I too am getting this error.
Angular CLI: 1.7.4
Angular 5.2.4
Typescript 2.6.2
MDB: 5.2.3

Actually I do not have the pro version, are basic modals not included for free? Is that why?


Damian Gemza staff commented 4 years ago

Dear Ian Worthington, Modals are available in free version. Please check if you're using schemas: [NO_ERRORS_SCHEMA] in your app.module.ts file. Best Regards, Damian

Ian Worthington free commented 4 years ago

I'm not. Anything else?

Ian Worthington free commented 4 years ago

Sorry, I found the issue. My fault for not reading the error properly (new to ng), no problems with mdb.

Dawid Adach pro answered 4 years ago


Guys, since we cannot recreate it, could you please provide us with more input or share your project? This will be helpful to fix the issue. Please provide us more detailed input like Angular / CLI / Typescript version, steps to reproduce, building process (ng serve / build / build prod)

DanielNetzer free answered 4 years ago


Anything new about this?

garland.jake pro answered 4 years ago


I was using 4.3.5 and it was working beautifully, here is the exact error message. As I stated, if I remove or comment out the modal the site loads and everything else works as expected. compiler.es5.js:1690 Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "mdb-modal" (" <!--Main Navigation--> <!--Modal: Contact form--> <div mdbModal [ERROR ->]#contactForm="mdb-modal" class="modal fade " id="modalContactForm" tabindex="-1" role="dialog" aria-l"): ng:///AppModule/CscTopNavComponent.html@120:14 at syntaxError (compiler.es5.js:1690) at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12810) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:26962) at compiler.es5.js:26882 at Set.forEach (<anonymous>) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26882) at compiler.es5.js:26769 at Object.then (compiler.es5.js:1679) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26768) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697) syntaxError @ compiler.es5.js:1690 webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse @ compiler.es5.js:12810 webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate @ compiler.es5.js:26962 (anonymous) @ compiler.es5.js:26882 webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents @ compiler.es5.js:26882 (anonymous) @ compiler.es5.js:26769 then @ compiler.es5.js:1679 webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768 webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697 webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536 webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522 ../../../../../src/main.ts @ main.ts:11 __webpack_require__ @ bootstrap 04433e1da1341486184c:54 3 @ main.ts:11 __webpack_require__ @ bootstrap 04433e1da1341486184c:54 webpackJsonpCallback @ bootstrap 04433e1da1341486184c:25 (anonymous) @ main.bundle.js:1 zone.js:2744 XHR finished loading: GET "http://localhost:4200/sockjs-node/info?t=1510250834650". scheduleTask @ zone.js:2744 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:411 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:259 (anonymous) @ zone.js:2769 proto.(anonymous function) @ zone.js:1274 webpackJsonp.../../../../sockjs-client/lib/transport/browser/abstract-xhr.js.AbstractXHRObject._start @ abstract-xhr.js:132 (anonymous) @ abstract-xhr.js:21 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:425 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:192 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:499 ZoneTask.invoke @ zone.js:488 timer @ zone.js:1896 setTimeout (async) scheduleTask @ zone.js:1906 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:411 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:259 (anonymous) @ zone.js:1932 proto.(anonymous function) @ zone.js:1274 AbstractXHRObject @ abstract-xhr.js:20 XHRLocalObject @ xhr-local.js:8 InfoAjax @ info-ajax.js:19 webpackJsonp.../../../../sockjs-client/lib/info-receiver.js.InfoReceiver._getReceiver @ info-receiver.js:36 webpackJsonp.../../../../sockjs-client/lib/info-receiver.js.InfoReceiver.doXhr @ info-receiver.js:56 (anonymous) @ info-receiver.js:25 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:425 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:192 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:499 ZoneTask.invoke @ zone.js:488 timer @ zone.js:1896 setTimeout (async) scheduleTask @ zone.js:1906 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:411 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:259 (anonymous) @ zone.js:1932 proto.(anonymous function) @ zone.js:1274 InfoReceiver @ info-receiver.js:24 SockJS @ main.js:121 socket @ socket.js:7 (anonymous) @ client?ffdb:161 ../../../../webpack-dev-server/client/index.js?http:/localhost:4200 @ client?ffdb:184 __webpack_require__ @ bootstrap 04433e1da1341486184c:54 3 @ main.ts:11 __webpack_require__ @ bootstrap 04433e1da1341486184c:54 webpackJsonpCallback @ bootstrap 04433e1da1341486184c:25 (anonymous) @ main.bundle.js:1

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

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags