javascript - TypeError: Object(...) is not a function in Ionic 4 app with ECharts
问题描述
我正在尝试按照本指南将ECharts集成到 Ionic (4) 应用程序中:
https://golb.hplar.ch/2017/02/Integrate-ECharts-into-an-Ionic-2-app.html
我按如下方式安装了所有模块(我添加了“离子信息”输出):
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'
}]
}
}
主页.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 版本(我的角度版本是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
}
}
包含<script src="../node_modules/echarts/dist/echarts.min.js"></script>
在 index.html 文件中后,错误仍然存在:
错误:未捕获(在承诺中):ReferenceError:未定义 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 的 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
未正确加载路径。所以我在你的离子项目echarts.min.js
的根文件中包含了路径。index.html
它现在正在工作 -
这是添加的代码 -
<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
推荐阅读
- php - 如何在不使用 php 注册 paypal 的情况下进行捐赠?
- javascript - 使用 Storybook/vue 时别名不起作用
- sql - SQL Rank 和 SUM
- ios - 在 Swift 5 中播放我的项目中的随机声音
- javascript - React 渲染预期表达式
- html - 无法在 Marketo 的模板中创建模块块
- bootstrap-4 - 引导导航栏宽徽标问题 - 防止换行
- csv - .NET Core 的 IFormFile 如何识别 .csv 文件?
- javascript - 拖放第一次不起作用,但第二次是
- javascript - 页面发送请求并且页面停止加载后的事件