Topic: EasyPieChart is not defined
MDBBootstrapModule.forRoot(), MDBBootstrapModulePro.forRoot(), ChartSimpleModuleMDB version: 4.3.5
Maciej Szuchta answered 7 years ago
... import { EasyPieChart } from './EasyPieChart'; @NgModule({ declarations: [ AppComponent, EasyPieChart ], imports: [ BrowserModule, MDBBootstrapModule.forRoot(), ], schemas: [NO_ERRORS_SCHEMA], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Regards Maciej
cignal pro commented 7 years ago
Thanks, Im trying to use component and it looks that the relevant class is "SimpleChartComponent", I imported ChartSimpleModule witch include the SimpleChartComponent. When added EasyPieChart or EasyPieChartComponent in my case to app module I'm getting the following exception: compiler.es5.js:1694 Uncaught Error: Type EasyPieChartComponent is part of the declarations of 2 modules: ChartSimpleModule and AppModule! Please consider moving EasyPieChartComponent to a higher module that imports ChartSimpleModule and AppModule. You can also create a new NgModule that exports and includes EasyPieChartComponent then import that NgModule in ChartSimpleModule and AppModule. at syntaxError (compiler.es5.js:1694) at CompileMetadataResolver._addTypeToModule (compiler.es5.js:15693) at compiler.es5.js:15581 at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15572) at JitCompiler._loadModules (compiler.es5.js:26958) at JitCompiler._compileModuleAndComponents (compiler.es5.js:26931) at JitCompiler.compileModuleAsync (compiler.es5.js:26860) at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536) at PlatformRef_.bootstrapModule (core.es5.js:4522)Maciej Szuchta answered 7 years ago
cignal pro commented 7 years ago
with the following app.module the exception is EasyPieChart is not defined: import { BrowserModule } from '@angular/platform-browser'; import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule} from '@angular/http'; import { AppComponent } from './app.component'; import {API} from "./api/API"; import {GarbageService} from "./services/GarbageService"; import {GarbageComponent} from "./components/GarbageComponent"; import {RouterModule} from "@angular/router"; import {routes} from "./app.routes"; import { ChartModule } from 'angular2-chartjs'; import {LoginService} from "./login/LoginService"; import {LoginComponent} from "./login/LoginComponent"; import {LoginGuard} from "./login/LoginGuard"; import { HeaderComponent } from './header/header.component'; // import { MDBBootstrapModule } from 'angular-bootstrap-md'; import { ChartComponent } from './chart/chart.component'; import {DropdownDirective} from "./directivs/dropdown.directive"; import { ProfilePageComponent } from './profile-page/profile-page.component'; import { AccountSettingsPageComponent } from './account-settings-page/account-settings-page.component'; import { DashboardPageComponent } from './deshboard-page/dashboard-page.component'; import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component'; import { MDBBootstrapModule } from '../../typescripts/free'; import { MDBBootstrapModulePro } from '../../typescripts/pro'; import { MapPageComponent } from './map-page/map-page.component'; import { DataCenterSwitchComponent } from './data-center-switch/data-center-switch.component'; import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive'; import {EasyPieChartComponent} from "../../typescripts/pro/easy-charts/chart-smallpie.component"; import {ChartSimpleModule} from "../../typescripts/pro/easy-charts/chart-simple.module"; @NgModule({ declarations: [ GarbageComponent, AppComponent, LoginComponent, HeaderComponent, ChartComponent, DropdownDirective, ProfilePageComponent, AccountSettingsPageComponent, DashboardPageComponent, DoughnutChartComponent, MapPageComponent, DataCenterSwitchComponent, GoogleChart, ], imports: [ ChartModule, RouterModule.forRoot( routes ), HttpModule, BrowserModule, FormsModule, MDBBootstrapModule.forRoot(), MDBBootstrapModulePro.forRoot(), ChartSimpleModule ], providers: [ API, GarbageService, LoginService, LoginGuard ], schemas: [ NO_ERRORS_SCHEMA ], bootstrap: [AppComponent] }) export class AppModule { } ThanksMaciej Szuchta commented 7 years ago
Cignal You can try this: Create pieChart.ts file and put there : import { Component } from '@angular/core'; @Component({ selector: 'chart-component-example', templateUrl: 'chart.component.html', }) export class ChartComponentExample { public chartType = 'pie'; public chartData: Array = [300, 50, 100, 40, 120]; public chartLabels: Array = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey']; public chartColors: Array = [{ hoverBorderColor: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)'], hoverBorderWidth: 0, backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'], hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'] }]; public chartOptions: any = { responsive: true }; public chartClicked(e: any): void { } public chartHovered(e: any): void { } } Then create template file chart.component.html with : In app.module.ts put import {ChartComponentExample} from './PieCHart'; declarations: [ AppComponent, ChartComponentExample ], Then you will be able to use Pie Chart like this in your application Else you can send me your project folder on m.szuchta@mdbootstrap.com and I will do more investigation on that. RegardsFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No