TypeError: Object(...) is not a function in Ionic 4 app with ECharts

Question

I'm trying to integrate ECharts into an Ionic (4) app following this guide:

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

I installed all the modules as follows (i add "ionic info" output):

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: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ echarts@4.2.0-rc.2
added 2 packages in 176.695s

D:\e-charts-debug>npm install ngx-echarts -S
npm WARN ngx-echarts@4.0.0 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 ngx-echarts@4.0.0 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 ngx-echarts@4.0.0 requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ ngx-echarts@4.0.0
added 1 package in 108.986s

D:\e-charts-debug>npm install @types/echarts -D
npm WARN ngx-echarts@4.0.0 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 ngx-echarts@4.0.0 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 ngx-echarts@4.0.0 requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @types/echarts@4.1.1
added 1 package in 108.858s

I also modified tsconfig.json and app.module.ts as follows:

"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)
  ],
...

In home.ts and home.html i just added a single chart like the example does:

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>

However, when i serve the app i get this error:

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

Is it just an import or version issue? If so, how can i solve it?

Thanks for your help!

EDIT:

Like the answers below suggest, i tried to install an older ngx-echarts version (my angular version is 5.2.10):

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

+ echarts@4.2.0-rc.2
added 2 packages in 38.188s

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

+ ngx-echarts@2.2.0
added 1 package in 31.035s

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

+ @types/echarts@4.1.1
added 1 package in 16.213s

Now i see a strange npm warning on "echarts peer", since my version should be fine.

When i launch my app with ionic serve i get this error:

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

I used a new project, doing the same imports process, except from the different ngx-echarts version installed.

EDIT 2

This is my 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>

And this is my 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
  }
}

After including <script src="../node_modules/echarts/dist/echarts.min.js"></script> in index.html file the error still remains:

Error: Uncaught (in promise): ReferenceError: echarts is not defined ReferenceError: echarts is not defined

Answer 1

It seems you are using Angular 5x version , but the version of ngx-echarts you are using is compatible with Angular 6 . As it seems from this warning -

npm WARN ngx-echarts@4.0.0 requires a peer of @angular/core@^6.0.0-rc.0 || >=6.0.0 but none is installed.

It also mentioned in the README of 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

Here is a similar issue in Github https://github.com/xieziyu/ngx-echarts/issues/113

So you can install it like -

npm install ngx-echarts@2.2.0 -S

or else you can specify the version in your package.json for ngx-echarts

Updated Answer

After looking into your project , it seems that the path to the echarts.min.js is not loaded correctly by your ionic app. So I included the path to the echarts.min.js in the root index.html file of your ionic project. It is working now -

Here is the code which is added -

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

You need to adjust the path according to your project structure. Here is a stackblitz sample which I created with the same package version that you are using.

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

You can also check the guide for the 2x version here.

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

second update

The above change would work for angular cli, but for ionic the script files should be available in the www folder after the build ,hence you can copy the echarts.min.js file from ../node_modules/echarts/dist/echarts.min.js to your src/assets folder and use the below path in your index.html .

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

Please check the location of your tsconfig.json file , the path to the echarts library depends on it given in the baseUrl . Check this https://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 2

You have correct setup but the problem is with your compatibility issues:

npm WARN ngx-echarts@4.0.0 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 ngx-echarts@4.0.0 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 ngx-echarts@4.0.0 requires a peer of echarts@>=3.1.1 but none is installed. You must install peer dependencies yourself.

When you read ngx-echarts README you will se ethis note:

Latest version @npm:

v3.2.0 for Angular >= 6

v2.3.1 for Angular < 6

Github branches:

master for Angular >= 6

v2.x for Angular < 6

So in your package.json change "ngx-echarts": "4.0.0" to "ngx-echarts": "~2.3.1", delete your node_modules folder, then run npm i command again.

And follow instructions of this branch: https://github.com/xieziyu/ngx-echarts/tree/v2.x

OR better choice if you just starting with the project, go with Ionic with Angular version 6 instead of version 4/5, should be logger support of it.

Actually Ionic 4 I think already starting with version 6 as I remember, not sure how you got Angular 4/5.