Followed the Quick Start Guide But Getting Errors

[HemanthKalathil]

I am using angular 6.2.9 and I won't be able to update. Here is the error: Uncaught TypeError: Object(...) is not a function at angular-plotly.js.js:124 at Module../node_modules/angular-plotly.js/fesm5/angular-plotly.js.js (angular-plotly.js.js:131) at webpack_require (bootstrap:78) at Module../src/app/app.module.ts (app.component.ts:13) at webpack_require (bootstrap:78) at Module../src/main.ts (main.ts:1) at webpack_require (bootstrap:78) at Object.0 (main.ts:12) at webpack_require (bootstrap:78) at checkDeferredModules (bootstrap:45)

[andrefarzat]

@HemanthKalathil it might be the typescript version. Mind showing us the package.json ?

[HemanthKalathil]

"name": "mce-ui", "version": "0.0.0", "author": "ge", "license": "Commercial", "private": true, "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "dependencies": { "@angular/animations": "^7.0.0-rc.1", "@angular/cdk": "6.4.7", "@angular/common": "^7.0.0-rc.1", "@angular/compiler": "^7.0.0-rc.1", "@angular/core": "^7.0.0-rc.1", "@angular/forms": "^7.0.0-rc.1", "@angular/http": "^7.0.0-rc.1", "@angular/material": "^6.4.7", "@angular/platform-browser": "^7.0.0-rc.1", "@angular/platform-browser-dynamic": "^7.0.0-rc.1", "@angular/router": "^7.0.0-rc.1", "@ngrx/effects": "^6.1.0", "@ngrx/entity": "^6.1.0", "@ngrx/router-store": "^6.1.0", "@ngrx/store": "^6.1.0", "@ngrx/store-devtools": "^6.1.0", "@types/cytoscape": "^3.1.6", "@types/moment-timezone": "^0.5.6", "ag-grid": "^18.1.0", "ag-grid-angular": "^19.0.0", "ag-grid-community": "^19.0.0", "ag-grid-enterprise": "^19.0.0", "angular-plotly.js": "^1.4.2", "core-js": "^2.5.4", "cytoscape": "^3.2.17", "cytoscape-context-menus": "^3.0.6", "cytoscape-cose-bilkent": "4.0.0", "cytoscape-klay": "3.1.1", "cytoscape-node-html-label": "1.1.0", "cytoscape-popper": "1.0.2", "cytoscape-qtip": "2.7.1", "d": "^1.0.1", "font-awesome": "^4.7.0", "jquery": "^3.3.1", "moment-timezone": "^0.5.21", "plotly.js": "^1.49.4", "primeicons": "1.0.0-beta.10", "primeng": "^6.1.2", "rxjs": "^6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.8.5", "@angular-devkit/build-ng-packagr": "~0.8.5", "@angular/cli": "^6.2.5", "@angular/compiler-cli": "^7.0.0-rc.1", "@angular/language-service": "^7.0.0-rc.1", "@ngrx/schematics": "^6.1.0", "@types/jasmine": "~2.8.9", "@types/jasminewd2": "~2.0.5", "@types/jquery": "^3.3.15", "@types/node": "~10.11.7", "codelyzer": "~4.5.0", "jasmine-core": "~3.2.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^1.3.1", "ng-packagr": "^4.3.0", "prettier": "^1.13.7", "protractor": "^5.4.1", "rimraf": "^2.6.2", "shebang-loader": "0.0.1", "ts-node": "~7.0.1", "tsickle": ">=0.29.0", "tslib": "^1.9.0", "tslint": "~5.11.0", "typescript": "~3.1.2" } } Sorry for the late response, I am not really in the position to change the typescript version if that effects the code in any way.

[andrefarzat]

@HemanthKalathil I could replicate your issue with your package.json file. It's more related to angular version than typescript version. Would it be ok to you downgrade the angular-plotly.jsto 1.3.2 ? In my test it worked.

We have another issue with a similar problem (https://github.com/plotly/angular-plotly.js/issues/79) and we are seeing what would be the best approach to avoid this version conflicts

[HemanthKalathil]

Hi, Yes using 1.3.2 is fine I just need to create a heatMap. I am new to angular and plotly so how would I install an earlier version? Thanks for the help

[andrefarzat]

@HemanthKalathil just replace "angular-plotly.js": "^1.4.2", to "angular-plotly.js": "1.3.2", in your package.json, remove the package-lock.json file, clean your node_modules folder and run npm install again 😸

[HemanthKalathil]

Does the plotly.js have to be a specific version as well or do I only need to change the angular-plotly.js?

[andrefarzat]

@HemanthKalathil use the most recent one: 1.49.4

[HemanthKalathil]

okay thank you for all the help. Let me try that now!

[HemanthKalathil]

It doesn't seem to be working still I am not sure what I did wrong. I changed the package.json to this: { "name": "mce-ui", "version": "0.0.0", "author": "ge", "license": "Commercial", "private": true, "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "dependencies": { "@angular/animations": "^7.0.0-rc.1", "@angular/cdk": "6.4.7", "@angular/common": "^7.0.0-rc.1", "@angular/compiler": "^7.0.0-rc.1", "@angular/core": "^7.0.0-rc.1", "@angular/forms": "^7.0.0-rc.1", "@angular/http": "^7.0.0-rc.1", "@angular/material": "^6.4.7", "@angular/platform-browser": "^7.0.0-rc.1", "@angular/platform-browser-dynamic": "^7.0.0-rc.1", "@angular/router": "^7.0.0-rc.1", "@ngrx/effects": "^6.1.0", "@ngrx/entity": "^6.1.0", "@ngrx/router-store": "^6.1.0", "@ngrx/store": "^6.1.0", "@ngrx/store-devtools": "^6.1.0", "@types/cytoscape": "^3.1.6", "@types/moment-timezone": "^0.5.6", "ag-grid": "^18.1.0", "ag-grid-angular": "^19.0.0", "ag-grid-community": "^19.0.0", "ag-grid-enterprise": "^19.0.0", "angular-plotly.js": "^1.3.2", "clean-node-modules": "^2.1.3", "core-js": "^2.5.4", "cytoscape": "^3.2.17", "cytoscape-context-menus": "^3.0.6", "cytoscape-cose-bilkent": "4.0.0", "cytoscape-klay": "3.1.1", "cytoscape-node-html-label": "1.1.0", "cytoscape-popper": "1.0.2", "cytoscape-qtip": "2.7.1", "d": "^1.0.1", "font-awesome": "^4.7.0", "jquery": "^3.3.1", "moment-timezone": "^0.5.21", "plotly.js": "^1.49.4", "primeicons": "1.0.0-beta.10", "primeng": "^6.1.2", "rxjs": "^6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.8.5", "@angular-devkit/build-ng-packagr": "~0.8.5", "@angular/cli": "^6.2.5", "@angular/compiler-cli": "^7.0.0-rc.1", "@angular/language-service": "^7.0.0-rc.1", "@ngrx/schematics": "^6.1.0", "@types/jasmine": "~2.8.9", "@types/jasminewd2": "~2.0.5", "@types/jquery": "^3.3.15", "@types/node": "~10.11.7", "codelyzer": "~4.5.0", "jasmine-core": "~3.2.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^1.3.1", "ng-packagr": "^4.3.0", "prettier": "^1.13.7", "protractor": "^5.4.1", "rimraf": "^2.6.2", "shebang-loader": "0.0.1", "ts-node": "~7.0.1", "tsickle": ">=0.29.0", "tslib": "^1.9.0", "tslint": "~5.11.0", "typescript": "~3.1.2" } }

Then I removed the package-lock.json, then I did: npm install rimraf -g

rimraf node_modules

then I did npm install

But I still get this error; angular-plotly.js.js:124 Uncaught TypeError: Object(...) is not a function at angular-plotly.js.js:124 at Module../node_modules/angular-plotly.js/fesm5/angular-plotly.js.js (angular-plotly.js.js:131) at webpack_require (bootstrap:78) at Module../src/app/app.module.ts (app.component.ts:13) at webpack_require (bootstrap:78) at Module../src/main.ts (main.ts:1) at webpack_require (bootstrap:78) at Object.0 (main.ts:12) at webpack_require (bootstrap:78) at checkDeferredModules (bootstrap:45)

[HemanthKalathil]

Sorry for the trouble! But I was able to make it work by doing this instead: npm uninstall angular-plotly.js npm install angular-plotly.js@^1.3.2 Thanks for all the help

[andrefarzat]

Good to hear you manage to solve it 😸 Gonna close here, but feel free to reopen if need

[AndreHermanto]

@andrefarzat Hi, I followed the solution here, but I still see the warning and error on browser. I already tried several version of angular plotly 1.7.0, 1.8.0, and 1.3.2 but all doesn't work. Here's my package.json

{
  "name": "charts-viewer-demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "angular-plotly.js": "^1.3.2",
    "core-js": "^2.5.4",
    "plotly.js": "^1.53.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.12.0",
    "@angular/cli": "~7.2.1",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "ajv": "^6.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}