Minimalist charts with angular mdb

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Minimalist charts with angular mdb

Hosboss pro asked 7 years ago

The Minimalist charts (mdb-simple-chart) does not work with angular, here is the error message I get: 
Uncaught Error: Template parse errors:
Can't bind to 'percent' since it isn't a known property of 'mdb-simple-chart'.
1. If 'mdb-simple-chart' is an Angular component and it has 'percent' input, then verify that it is part of this module.
2. If 'mdb-simple-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("reen">Economie <i class="fa fa-arrow-circle-up"></i></span>-->
Thank you for your help.

Edyta Dabrowska answered 7 years ago

Hi, could you please tell me what version exactly do you use? And please send me some of your code snippet with mdb-simple-chart.

Hosboss pro answered 7 years ago

Hi, I am currently upgrading my project to version 4.3.1 and I think this will solve my problems. On the other hand I have warning to the compilation with this version:   WARNING in Circular dependency detected: srcapptypescriptsfreemodalsmodal.service.ts -> srcapptypescriptsfreemodalsmodalContainer.component.ts -> srcapptypescriptsfreemodalsmodal.service.ts WARNING in Circular dependency detected: srcapptypescriptsfreemodalsmodalContainer.component.ts -> srcapptypescriptsfreemodalsmodal.service.ts -> srcapptypescriptsfreemodalsmodalContainer.component.ts WARNING in Circular dependency detected: srcapptypescriptsproaccordioncomponentssb-item.ts -> srcapptypescriptsproaccordioncomponentssqueezebox.ts -> srcapptypescriptsproaccordioncomponentssb-item.ts WARNING in Circular dependency detected: srcapptypescriptsproaccordioncomponentssqueezebox.ts -> srcapptypescriptsproaccordioncomponentssb-item.ts -> srcapptypescriptsproaccordioncomponentssqueezebox.ts WARNING in Circular dependency detected: srcapptypescriptsproalertstoasttoast.component.ts -> srcapptypescriptsproalertstoasttoast.service.ts -> srcapptypescriptsproalertstoasttoast.component.ts WARNING in Circular dependency detected: srcapptypescriptsproalertstoasttoast.service.ts -> srcapptypescriptsproalertstoasttoast.component.ts -> srcapptypescriptsproalertstoasttoast.service.ts   And this makes a mistake on the explorer: ERROR Error: Uncaught (in promise): Error: ToastModule is already loaded. It should only be imported in your application's main module. Error: ToastModule is already loaded. It should only be imported in your application's main module. at new ToastModule (toast.module.ts:37) at _createClass (core.es5.js:9520) at _createProviderInstance$1 (core.es5.js:9492) at initNgModule (core.es5.js:9446) at new NgModuleRef_ (core.es5.js:10560) at createNgModuleRef (core.es5.js:10544) at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12843) at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13838) at MapSubscriber.project (router.es5.js:3520) at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77) at new ToastModule (toast.module.ts:37) at _createClass (core.es5.js:9520) at _createProviderInstance$1 (core.es5.js:9492) at initNgModule (core.es5.js:9446) at new NgModuleRef_ (core.es5.js:10560) at createNgModuleRef (core.es5.js:10544) at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12843) at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13838) at MapSubscriber.project (router.es5.js:3520) at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77) at resolvePromise (zone.js:795) at resolvePromise (zone.js:766) at zone.js:844 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at <anonymous>

Edyta Dabrowska answered 7 years ago

It seems like you are importing modals in 2 places. Modals should be only imported in your app.module.ts.

TURKI Hosni pro commented 7 years ago

I import MDBBootstrapModule.forRoot (), MDBBootstrapModulePro.forRoot (), in each module because otherwise I have another error: ERROR Error: Uncaught (in promise): Error: Template parse errors: 'Mdb-card-rotating' is not a known element: 1. If 'mdb-card-rotating' is an Angular component, then verify that it is part of this module. 2. If 'mdb-card-rotating' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@ NgModule.schemas' of this component to suppress this message. ( ' [ERROR ->] (I did it on version 4.1.0 and it was not a problem).

Edyta Dabrowska answered 7 years ago

Please tell me are you using rotating cards in your projects? If yes, what selector does it have?

TURKI Hosni pro commented 7 years ago

Yes, I use it, (with the selector 'mdb-card-rotating') but this is not the problem, the error is done on any directive if I do not put MDBBootstrapModule.forRoot () MDBBootstrapModulePro.forRoot (), in each module and this may be what makes the mistake: 'WARNING in Circular dependency detected:' and Error: ToastModule is already loaded. It should only be imported in your application's main module. In any case, I can not use version 4.3.1 and I am back on version 4.1.0. Or can we find the documentation for this version?

Edyta Dabrowska answered 7 years ago

Here you can find documentation to 4.1.0. While updating you just need to move typescript, fonts, scss and img folders to your project and then npm i. Please try this and let me know how it works.

TURKI Hosni pro commented 7 years ago

Bonjour, Thank you for the documentation, but it lacks all the "Advanced" and lightbox among others. Otherwise I just tested the update as you describe it and I fall back on the same errors.

Edyta Dabrowska answered 7 years ago

Right now 4.1.0 documentation is fully working. What errors do you get? I don't know your code so maybe this could help: https://angular.io/guide/dependency-injection-in-action#dependency-injection

TURKI Hosni pro commented 7 years ago

Hi, Thank you, I have the same problem as on this post: <a href="https://mdbootstrap.com/support/toastrmodule-is-already-loaded-error-after-upgrade/" rel="nofollow">https://mdbootstrap.com/support/toastrmodule-is-already-loaded-error-after-upgrade/</a>

Edyta Dabrowska answered 7 years ago

If you have exactly the same problem, then this will be fixed in the future on our side.
Write
Create snippet
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
About author
Hosboss
Pro User
12Support score
8Questions 9Answers
0Snippets likes 0Snippets