Topic: EasyPieChart is not defined

cignal pro asked 5 years ago

Hey, I'm trying to implement the minimalist chart example from the documentation and I'm getting the following exception: ERROR ReferenceError: EasyPieChart is not defined at EasyPieChartComponent.Array.concat.EasyPieChartComponent.ngOnInit (chart-smallpie.component.ts:36) at checkAndUpdateDirectiveInline (core.es5.js:10856) at checkAndUpdateNodeInline (core.es5.js:12357) at checkAndUpdateNode (core.es5.js:12296) at debugCheckAndUpdateNode (core.es5.js:13160) at debugCheckDirectivesFn (core.es5.js:13101) at Object.View_SimpleChartComponent_0._co [as updateDirectives] (SimpleChartComponent.html:3) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13086) at checkAndUpdateView (core.es5.js:12263) at callViewAction (core.es5.js:12631) app.module include:
MDB version: 4.3.5  

Maciej Szuchta free answered 5 years ago

Please try moving  ChartSimpleModule into app.module.ts imports section, if that won't resolve the problem please send me your app.module.ts code. Regards

cignal pro commented 5 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 { } Thanks

Maciej Szuchta free commented 5 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 and I will do more investigation on that. Regards

Maciej Szuchta free answered 5 years ago

Hey cignal Please check if your imported { EasyPieChart } to your app.module.ts. You need something like this:

import { EasyPieChart } from './EasyPieChart';

  declarations: [
  imports: [
  schemas: [NO_ERRORS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }
  Regards Maciej

cignal pro commented 5 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)

Please insert min. 20 characters.


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



Specification of the issue

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