web-dev-qa-db-fra.com

TypeError: Object (...) n'est pas une fonction dans l'application Ionic 4 avec ECharts

J'essaie d'intégrer ECharts dans une application Ionic (4) en suivant ce guide:

https://golb.hplar.ch/2017/02/Integrate-ECharts-into-an-Ionic-2-app.html

J'ai installé tous les modules comme suit (j'ajoute une sortie "ionic info"):

D:\e-charts-debug>ionic info
√ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.1.1
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10


D:\e-charts-debug>npm install echarts -S
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"win32","Arch":"x64"})

+ [email protected]
added 2 packages in 176.695s

D:\e-charts-debug>npm install ngx-echarts -S
npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"win32","Arch":"x64"})

+ [email protected]
added 1 package in 108.986s

D:\e-charts-debug>npm install @types/echarts -D
npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"win32","Arch":"x64"})

+ @types/[email protected]
added 1 package in 108.858s

J'ai également modifié tsconfig.json et app.module.ts comme suit:

"compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,

    ...

    "baseUrl": ".",
    "paths": {
      "echarts": ["node_modules/echarts/dist/echarts.min.js"]
    }
}

app.module.ts:

import {NgxEchartsModule} from "ngx-echarts";

...

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    NgxEchartsModule,
    IonicModule.forRoot(MyApp)
  ],
...

Dans home.ts et home.html, je viens d'ajouter un seul graphique, comme le fait l'exemple:

home.ts:

    import { EChartOption } from 'echarts';

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {

        chartOption: EChartOption = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        }
}

home.html:

<ion-content padding>
      <div echarts [options]="chartOption" class="demo-chart"></div>
    </ion-content>

Cependant, lorsque je sers l'application, j'obtiens cette erreur:

Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at ChangeFilter.notFirstAndEmpty (http://localhost:8101/build/vendor.js:181834:67)
    at NgxEchartsDirective.ngOnChanges (http://localhost:8101/build/vendor.js:181941:16)
    at checkAndUpdateDirectiveInline (http://localhost:8101/build/vendor.js:13831:19)
    at checkAndUpdateNodeInline (http://localhost:8101/build/vendor.js:15359:20)
    at checkAndUpdateNode (http://localhost:8101/build/vendor.js:15302:16)
    at debugCheckAndUpdateNode (http://localhost:8101/build/vendor.js:16195:76)
    at debugCheckDirectivesFn (http://localhost:8101/build/vendor.js:16136:13)
    at Object.eval [as updateDirectives] (ng:///AppModule/HomePage.ngfactory.js:40:5)
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8101/build/vendor.js:16121:21)
    at checkAndUpdateView (http://localhost:8101/build/vendor.js:15268:14)
    at c (http://localhost:8101/build/polyfills.js:3:19752)
    at Object.reject (http://localhost:8101/build/polyfills.js:3:19174)
    at NavControllerBase._fireError (http://localhost:8101/build/vendor.js:74789:16)
    at NavControllerBase._failed (http://localhost:8101/build/vendor.js:74782:14)
    at http://localhost:8101/build/vendor.js:74829:59
    at t.invoke (http://localhost:8101/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8101/build/vendor.js:6184:33)
    at t.invoke (http://localhost:8101/build/polyfills.js:3:14916)
    at r.run (http://localhost:8101/build/polyfills.js:3:10143)
    at http://localhost:8101/build/polyfills.js:3:20242

Est-ce juste un problème d'importation ou de version? Si oui, comment puis-je le résoudre?

Merci de votre aide!

MODIFIER:

Comme les réponses ci-dessous le suggèrent, j'ai essayé d'installer une version plus ancienne de ngx-echarts (ma version angulaire est 5.2.10):

D:\e-charts-2.0.0>npm install echarts -S
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"win32","Arch":"x64"})

+ [email protected]
added 2 packages in 38.188s

D:\e-charts-2.0.0>npm install [email protected] -S
npm WARN [email protected] requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"win32","Arch":"x64"})

+ [email protected]
added 1 package in 31.035s

D:\e-charts-2.0.0>npm install @types/echarts -D
npm WARN [email protected] requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","Arch":"any"} (current: {"os":"win32","Arch":"x64"})

+ @types/[email protected]
added 1 package in 16.213s

Maintenant, je vois un étrange avertissement npm sur "echarts peer", car ma version devrait bien fonctionner.

Lorsque je lance mon application avec ionic serve, j'obtiens cette erreur:

Error: Uncaught (in promise): ReferenceError: echarts is not defined
ReferenceError: echarts is not defined
    at http://localhost:8100/build/vendor.js:123341:61
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at NgZone.runOutsideAngular (http://localhost:8100/build/vendor.js:5082:69)
    at NgxEchartsDirective.createChart (http://localhost:8100/build/vendor.js:123341:29)
    at NgxEchartsDirective.onOptionsChange (http://localhost:8100/build/vendor.js:123396:36)
    at SafeSubscriber._next (http://localhost:8100/build/vendor.js:123363:76)
    at SafeSubscriber.__tryOrSetError (http://localhost:8100/build/vendor.js:35962:16)
    at SafeSubscriber.next (http://localhost:8100/build/vendor.js:35902:27)
    at Subscriber._next (http://localhost:8100/build/vendor.js:35840:26)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
    at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:51258:16)
    at NavControllerBase._failed (http://localhost:8100/build/vendor.js:51251:14)
    at http://localhost:8100/build/vendor.js:51298:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242

J'ai utilisé un nouveau projet, effectuant le même processus d'importation, à l'exception de la version différente de ngx-echarts installée.

EDIT 2

Ceci est mon index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="Apple-mobile-web-app-capable" content="yes">
  <meta name="Apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
    <script src="cordova.js"></script>
    <script src="../node_modules/echarts/dist/echarts.min.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

Et voici mon tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl": ".",
    "paths": {
      "echarts": ["node_modules/echarts/dist/echarts.min.js"]
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.spec.ts",
    "src/**/__tests__/*.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Après avoir inclus <script src="../node_modules/echarts/dist/echarts.min.js"></script> dans le fichier index.html, l'erreur persiste:

Erreur: Non capturé (promis): ReferenceError: echarts n'est pas défini ReferenceError: echarts n'est pas défini

javascriptangularionic-frameworkecharts
4
Ansharja

Il semble que vous utilisiez la version Angular 5x, mais la version de ngx-echarts que vous utilisez est compatible avec Angular 6. Comme il semble de cet avertissement -

npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || >=6.0.0 but none is installed.

Il est également mentionné dans le README de ngx-echarts 

Latest version @npm:

    v4.0.0 for Angular >= 6
    v2.3.1 for Angular < 6 (Please refer to https://github.com/xieziyu/ngx-echarts/blob/v2.x/README.md)

Github branches:

    master for Angular >= 6
    v2.x for Angular < 6

Voici un problème similaire dans Github https://github.com/xieziyu/ngx-echarts/issues/113

Pour que vous puissiez l'installer comme -

npm install [email protected] -S

ou bien vous pouvez spécifier la version dans votre package.json pour ngx-echarts 

Réponse mise à jour

Après avoir examiné votre projet, il semble que le chemin d'accès au echarts.min.js n'est pas chargé correctement par votre application ionique. J'ai donc inclus le chemin d'accès au echarts.min.js dans le fichier racine index.html de votre projet ionique. Il fonctionne maintenant -

Voici le code qui est ajouté -

<html>
  <head>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
  </head>
<body>
<my-app>loading</my-app>
</body>
</html>

Vous devez ajuster le chemin en fonction de la structure de votre projet. Voici un exemple de stackblitz que j'ai créé avec la même version de package que celle que vous utilisez.

https://stackblitz.com/edit/angular-eml14x

Vous pouvez également consulter le guide de la version 2x ici.

https://github.com/xieziyu/ngx-echarts/tree/v2.x

seconde mise à jour

La modification ci-dessus fonctionne pour cli angulaire, mais pour ionic, les fichiers de script doivent être disponibles dans le dossier www après la construction. Vous pouvez donc copier le fichier echarts.min.js de ../node_modules/echarts/dist/echarts.min.js dans votre dossier src/assets et utiliser le chemin ci-dessous dans votre index.html. 

<script src="assets/echarts.min.js"></script>

Veuillez vérifier l’emplacement de votre fichier tsconfig.json, le chemin de la bibliothèque echarts dépend de celui indiqué dans la baseUrl. Cochez cette case https://www.typescriptlang.org/docs/handbook/module-resolution.html

3
Niladri

Votre configuration est correcte mais le problème vient de vos problèmes de compatibilité:

npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || >=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.

Lorsque vous lirez ngx-echarts README, vous remarquerez que:

Dernière version @npm:

v3.2.0 pour Angular> = 6 

v2.3.1 pour Angular <6 

Branches Github:

master pour Angular> = 6 

v2.x pour Angular <6

Ainsi, dans votre package.json, remplacez "ngx-echarts": "4.0.0" par "ngx-echarts": "~2.3.1", supprimez votre dossier node_modules, puis exécutez à nouveau la commande npm i.

Et suivez les instructions de cette branche: https://github.com/xieziyu/ngx-echarts/tree/v2.x

OU meilleur choix si vous commencez juste avec le projet, allez avec Ionic avec Angular version 6 au lieu de la version 4/5, devrait en être un support de journalisation.

En fait, je pense que je commence déjà avec la version 6 de Ionic 4, mais je ne sais pas comment vous avez obtenu Angular 4/5.

1
Al-Mothafar