EasyPieChart is not defined

Topic: EasyPieChart is not defined

cignal pro asked 7 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:

MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
ChartSimpleModule

MDB version: 4.3.5

Add comment

Maciej Szuchta free answered 7 years ago

0 0 Best answer

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 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 { } Thanks

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

Please insert min. 15 characters.

Maciej Szuchta free 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. Regards

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.

Regards

Please insert min. 15 characters.

Add comment

Maciej Szuchta free answered 7 years ago

0 0 Best answer

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

...

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)

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. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

cignal

Pro User 5Support score
6Questions 0Answers 0Snippets