Skip to content

Followed the Quick Start Guide But Getting Errors #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
HemanthKalathil opened this issue Sep 12, 2019 · 12 comments
Closed

Followed the Quick Start Guide But Getting Errors #80

HemanthKalathil opened this issue Sep 12, 2019 · 12 comments

Comments

@HemanthKalathil
Copy link

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
Copy link
Collaborator

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

@HemanthKalathil
Copy link
Author

"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
Copy link
Collaborator

@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
Copy link
Author

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
Copy link
Collaborator

andrefarzat commented Sep 16, 2019 •
edited
Loading

@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
Copy link
Author

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

@andrefarzat
Copy link
Collaborator

@HemanthKalathil use the most recent one: 1.49.4

@HemanthKalathil
Copy link
Author

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

@HemanthKalathil
Copy link
Author

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)

2019-09-16 14_07_53-Photos

@HemanthKalathil
Copy link
Author

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
Copy link
Collaborator

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

@AndreHermanto
Copy link

@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"
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@andrefarzat @AndreHermanto @HemanthKalathil