Cannot read property 'document' of undefined

[TravisLRiffle]

On a brand new project, following your directions I receive the following:
Cannot read property 'document' of undefined
at plotly.js:24874

I ran your github demo and it worked fine. Here is my package.json

{ "name": "plotly-test-new", "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": "~8.2.0", "@angular/common": "~8.2.0", "@angular/compiler": "~8.2.0", "@angular/core": "~8.2.0", "@angular/forms": "~8.2.0", "@angular/platform-browser": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0", "@angular/router": "~8.2.0", "angular-plotly.js": "^1.3.2", "plotly.js": "^1.49.4", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.802.0", "@angular/cli": "~8.2.0", "@angular/compiler-cli": "~8.2.0", "@angular/language-service": "~8.2.0", "@types/node": "~8.9.4", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.5.3" } }

[andrefarzat]

@TravisLRiffle looks like it was the missing support for angular 8.x
Please, update to version 1.4.0 and check if it works now 😸

[longtuan96]

Hello @andrefarzat , i have the same problem when i run with the example and im using version 1.4.0. this is the screenshot of the error that i inspect with Chrome

[dre2004]

I'm getting the exact same issue.

I'm using version 1.4.0

  "dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "angular-plotly.js": "^1.4.0",
    "bootstrap": "^4.3.1",
    "ng-sidebar": "^9.0.0",
    "plotly.js": "^1.49.4",
    "rxjs": "~6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

Also my node and angular versions are as follows.

Angular CLI: 8.2.2
Node: 10.16.3
OS: linux x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.2
@angular-devkit/build-angular     0.802.2
@angular-devkit/build-optimizer   0.802.2
@angular-devkit/build-webpack     0.802.2
@angular-devkit/core              8.2.2
@angular-devkit/schematics        8.2.2
@angular/cli                      8.2.2
@ngtools/webpack                  8.2.2
@schematics/angular               8.2.2
@schematics/update                0.802.2
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.38.0

[andrefarzat]

Hello @dre2004 , @TravisLRiffle and @longtuan96
I could replicate locally. This is an issue within plotly.js itself and ES6 modules: plotly/plotly.js#3518

As a quick solution, changing in the tsconfig.json the compilerOptions.target property to "es5" might solve the issue. Or using PlotlyViaCDNModule or PlotlyViaWindowModule to avoid the angular transpiler to minify the plotly.js code.

Gonna close this issue. Please, reopen if it's still an issue 😸

[TravisLRiffle]

I went with the CDN for now, but now I'm getting a completely different error on a very basic bar chart.
DriveTimeReportComponent.html:201 ERROR TypeError: this.getPlotly(...).react is not a function

Seems like I'm never going to get this library working. :(

[andrefarzat]

@TravisLRiffle which plotly.js version you're using ? PlotlyViaCDNModule.plotlyVersion = '1.49.4'; ?

[maxbellec]

Both es5 and PlotlyViaWindowModule mentioned here work for me. I prefer the PlotlyViaWindowModule one. Thx

[sayush]

Getting the same issue

    "@angular/animations": "~9.0.2",
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/forms": "~9.0.2",
    "@angular/localize": "^9.1.0",
    "@angular/platform-browser": "~9.0.2",
    "@angular/platform-browser-dynamic": "~9.0.2",
    "@angular/router": "~9.0.2",
    "@ng-bootstrap/ng-bootstrap": "^6.0.2",
    "angular-plotly.js": "^2.0.0",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "plotly.js": "^1.53.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"

[saurabhyadavz]

For me the problem was this:

function startHomeView(){
....
}

Page('/home',startHomeView());

Fixed:

function startHomeView(){
....
}

Page('/home',startHomeView);