Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

1K
Views
Chart JS + ng2-charts no funciona en Angular + 2

Hola desarrolladores, he estado literalmente todo el día tratando de implementar gráficos en mi proyecto, pero siguiendo los documentos oficiales no hay forma de que pueda eliminar este error:

 ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21 "export 'pluginService' was not found in 'chart.js' node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartPoint'. 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceGlobalRegistration'. 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'. 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'. 32 chart: Chart; ~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'. 56 getChartBuilder(ctx: string): Chart; ~~~~~ src/app/components/graphics/graphics.component.ts:6:20 - error TS2305: Module '"../../../../node_modules/chart.js/types/index.esm"' has no exported member 'pluginService'. 6 import { ChartType,pluginService} from 'chart.js'; ~~~~~~~~~~~~~ Date: 2021-04-03T22:59:36.844Z - Hash: 2c8378fd3f46cd7e10f8 6 unchanged chunks Time: 2109ms ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21 "export 'pluginService' was not found in 'chart.js' ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 324:8-21 "export 'pluginService' was not found in 'chart.js' ERROR in node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:30 - error TS2724: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartDataSets'. Did you mean 'ChartDataset'? 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'ChartPoint'. 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceGlobalRegistration'. 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"../../chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'. 4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'. 32 chart: Chart; ~~~~~ node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'. 56 getChartBuilder(ctx: string): Chart; ~~~~~

Todo esto cuando estoy tratando de implementar ng2-charts envolviendo chart.js desde su sitio oficial a través de los comandos:

 npm install --save ng2-charts npm install --save chart.js

Mi paquete.json tiene esta estructura:

 { "name": "front", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "postinstall": "ngcc" }, "private": true, "dependencies": { "@angular/animations": "~10.0.5", "@angular/cdk": "^10.2.7", "@angular/common": "~10.0.5", "@angular/compiler": "~10.0.5", "@angular/core": "~10.0.5", "@angular/forms": "~10.0.5", "@angular/material": "^10.2.7", "@angular/platform-browser": "~10.0.5", "@angular/platform-browser-dynamic": "~10.0.5", "@angular/router": "~10.0.5", "@mapbox/mapbox-gl-geocoder": "^4.7.0", "@ngrx/effects": "^10.1.2", "@ngrx/store": "^10.1.2", "@ngrx/store-devtools": "^10.1.2", "@swimlane/ngx-charts": "^17.0.1", "@swimlane/ngx-datatable": "^19.0.0", "angular-datatables": "^11.1.1", "bootstrap": "^4.6.0", "chart.js": "^3.0.1", "chartjs-plugin-datalabels": "^0.7.0", "datatables.net": "^1.10.20", "datatables.net-dt": "^1.10.20", "jquery": "^3.6.0", "mapbox-gl": "^2.2.0", "ng2-charts": "^2.4.2", "popper.js": "^1.16.1", "rxjs": "~6.5.5", "tslib": "^2.0.0", "uuid": "^8.3.2", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1000.4", "@angular/cli": "~10.0.4", "@angular/compiler-cli": "~10.0.5", "@types/datatables.net": "^1.10.18", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "@types/jquery": "^3.3.33", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~3.3.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.9.5" } }

Y ChartModule se implementa en app.module, así como en el componente modularizado en el que podría estar configurando los gráficos.

No estoy seguro de por qué esta situación. Cualquier ayuda sería increíble. Gracias por adelantado

over 4 years ago · Santiago Trujillo
7 answers
Answer question

0

Yo también tengo el problema similar. No estoy seguro de la solución. Lo resolví degradando los paquetes de gráficos a "ng2-charts": "^2.3.0" y "chart.js": "^2.9.3".

over 4 years ago · Santiago Trujillo Report

0

La razón por la que los gráficos no funcionan en angular tal vez se deba a la compatibilidad de la versión, estoy trabajando con angular 11.2.0 , npm 6.14.11 y node v15.13.0 . Estaba enfrentando el problema mencionado a continuación con los gráficos.

 Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:17:23 - error TS2724: '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'? 17 datasets: chartJs.ChartDataSets[]; ~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:33:12 - error TS2304: Cannot find name 'Chart'. 33 chart: Chart; ~~~~~ Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:57:35 - error TS2304: Cannot find name 'Chart'. 57 getChartBuilder(ctx: string): Chart; ~~~~~ Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:6:57 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported member 'ChartPoint'. 6 export declare type SingleDataSet = (number[] | chartJs.ChartPoint[]); ~~~~~~~~~~ Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:7:56 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported member 'ChartPoint'. 7 export declare type MultiDataSet = (number[] | chartJs.ChartPoint[])[]; ~~~~~~~~~~ Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:9:115 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported member 'PluginServiceRegistrationOptions'. 9 export declare type PluginServiceGlobalRegistrationAndOptions = chartJs.PluginServiceGlobalRegistration & chartJs.PluginServiceRegistrationOptions; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:9:73 - error TS2694: Namespace '"D:/myAngularWorks/testproject/node_modules/chart.js/types/index.esm"' has no exported member 'PluginServiceGlobalRegistration'. 9 export declare type PluginServiceGlobalRegistrationAndOptions = chartJs.PluginServiceGlobalRegistration & chartJs.PluginServiceRegistrationOptions;

este problema se puede resolver instalando la versión compatible de chart.js y ng2-charts usando el siguiente comando:

 npm install chart.js@2.9.3 --save npm install ng2-charts@2.2.3 --save

en su proyecto, ejecute npm i y reinicie el proyecto.

over 4 years ago · Santiago Trujillo Report

0

Tienes que actualizar ng2-charts

 npm install ng2-charts@v3.0.0-rc.3
over 4 years ago · Santiago Trujillo Report

0

Tuve el mismo problema y lo resolví cambiando las versiones:

npm instalar ng2-charts@2.2.3 chart.js@2.9.3 --guardar

over 4 years ago · Santiago Trujillo Report

0

para angular 12.2.2 a continuación, la versión de dependencias funcionó para mí

 "ng2-charts": "^2.4.2",` "chart.js": "^2.9.3",`
over 4 years ago · Santiago Trujillo Report

0

El mismo problema para ng2-charts y chart.js en blanco y negro incompatibles.

Reparado:

"chart.js": "^2.9.4",

"ng2-gráficos": "^2.4.2"

 Angular CLI: 9.0.3 Node: 16.10.0 OS: linux x64 Angular: ... Ivy Workspace: Package Version ------------------------------------------------------ @angular-devkit/architect 0.900.3 @angular-devkit/core 9.0.3 @angular-devkit/schematics 9.0.3 @schematics/angular 9.0.3 @schematics/update 0.900.3 rxjs 6.5.3
over 4 years ago · Santiago Trujillo Report

0

cambiar la versión

"chart.js": "^2.9.4", "ng2-charts": "^2.4.2"

en paquete.json y

npm yo

construir

Trabajar como un encanto..

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!