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

Question

我正尝试按照本指南将 ECharts 集成到 Ionic (4) 应用程序中：

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

我按如下方式安装了所有模块（我添加了 "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: 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

我还修改了tsconfig.json和app.module.ts如下：

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

在 home.ts 和 home.html 中，我只是像示例一样添加了一个图表：

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>

但是，当我为应用程序提供服务时出现此错误：

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

只是导入问题还是版本问题？如果是这样，我该如何解决？

感谢您的帮助！

编辑：

就像下面的答案所暗示的那样，我尝试安装一个较旧的 ngx-echarts 版本（我的 angular 版本是 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

现在我在 "echarts peer" 上看到一个奇怪的 npm 警告，因为我的版本应该没问题。

当我使用 ionic serve 启动我的应用程序时，出现此错误：

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

我用了一个新项目，做同样的导入过程，不同的是安装了不同的ngx-echarts版本。

编辑 2

这是我的 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>

这是我的 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
  }
}

在 index.html 文件中包含 <script src="../node_modules/echarts/dist/echarts.min.js"></script> 后，错误仍然存在：

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

Answer 1

看来您使用的是Angular 5x版本，但是您使用的ngx-echarts版本兼容Angular 6。从这个警告看来 -

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.

在ngx-echarts的README中也有提到

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

Github https://github.com/xieziyu/ngx-echarts/issues/113

中也有类似的问题

所以你可以像-

一样安装它

npm install ngx-echarts@2.2.0 -S

否则您可以在 package.json 中为 ngx-echarts

指定版本

更新答案

查看您的项目后，您的 ionic 应用程序似乎未正确加载 echarts.min.js 的路径。所以我在离子项目的根 index.html 文件中包含了 echarts.min.js 的路径。现在正在运行 -

这是添加的代码-

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

您需要根据您的项目结构调整路径。这是我使用您正在使用的相同包版本创建的 stackblitz 示例。

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

您还可以在此处查看 2x 版本的指南。

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

第二次更新

以上更改适用于 angular cli，但对于 ionic，构建后脚本文件应该在 www 文件夹中可用，因此您可以复制 echarts.min.js 文件从 ../node_modules/echarts/dist/echarts.min.js 到您的 src/assets 文件夹并在您的 index.html 中使用以下路径。

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

请检查您的 tsconfig.json 文件的位置，echarts 库的路径取决于 baseUrl 中给出的路径。检查这个 https://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 2

您的设置正确，但问题在于兼容性问题：

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.

当您阅读 ngx-echarts 自述文件时，您会看到以下注释：

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

因此，在您的 package.json 中将 "ngx-echarts": "4.0.0" 更改为 "ngx-echarts": "~2.3.1"，删除您的 node_modules 文件夹，然后再次执行运行 npm i 命令。

并按照此分支的说明进行操作：https://github.com/xieziyu/ngx-echarts/tree/v2.x

或者如果您刚开始这个项目，更好的选择是使用 Ionic Angular 版本 6 而不是版本 4/5，应该是它的记录器支持。

实际上 Ionic 4 我想我记得已经从版本 6 开始了，不知道你是怎么得到的 Angular 4/5。

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

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

javascript

angular

ionic-framework

echarts