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 (#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"
  }
}