Javascript TypeError:对象（…）不是带有ECharts的Ionic 4应用程序中的函数

我正试图按照以下指南集成到Ionic（4）应用程序中：

我安装了以下所有模块（我添加了“离子信息”输出）：

我还修改了

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>

这只是一个导入问题还是版本问题？如果是，我如何解决它

谢谢你的帮助

编辑：

正如下面的答案所示，我尝试安装一个较旧的ngx echarts版本（我的angular版本是

5.2.10

）：

现在我在“echarts peer”上看到一个奇怪的npm警告，因为我的版本应该可以

当我使用

爱奥尼亚服务启动我的应用程序时

出现以下错误：

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

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>

在index.html文件中包含

后，错误仍然存在：

错误：未捕获（承诺中）：引用错误：未定义echarts ReferenceError:未定义echarts

---

看起来您使用的是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自述文件中也提到了这一点

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

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

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

第二次更新

上述更改适用于angular cli，但对于ionic，脚本文件应在生成后位于

www

文件夹中，因此，您可以将

echarts.min.js

文件从

./node\u modules/echarts/dist/echarts.min.js

复制到

src/assets

文件夹中，并在

index.html

中使用以下路径

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

请检查tsconfig.json文件的位置，指向

echart

库的路径取决于

baseUrl

中给出的路径。 检查这个

---

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

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自述文件时，您将看到以下注意事项：

最新版本@npm:

角度>=6的

v3.2.0

角度<6的

v2.3.1

Github分支机构：

master

用于角度>=6

角度<6的

v2.x

因此，在您的package.json中将“ngx-echart”：“4.0.0”更改为“~2.3.1”，删除您的

节点模块

文件夹，然后再次运行

npm i

命令

并遵照本处的指示：

或者更好的选择，如果你刚刚开始与项目，去离子与角度版本6，而不是版本4/5，应该是它的记录器支持

---

事实上，我想我已经从版本6开始了，我不确定你是怎么得到角度4/5的。

你什么时候得到错误的？在浏览器中？或者在

ng serve

？如果您的角度版本为5X，请检查我的答案。当我使用爱奥尼亚服务在浏览器上启动我的应用程序时，我发现了错误。我现在正在检查版本如果您使用的是Angular cli，那么您可以使用

ng-v

进行检查，或者检查您的软件包。json是否使用Angular cli？谢谢您的回答，请检查我的Edit@Ansharja检查此链接并检查tsconfig中是否给出了echart的路径file@Nilandri我试图直接在index.html中导入脚本，但不幸的是，它仍然没有导入working@Ansharja您可以发布index.html和tsconfig.json吗？现在怎么了？我得等24小时才能给你赏金。。。现在它是你的了！谢谢你的回答，请查看我的编辑1以获得有用的答案

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

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

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

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.