search

bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
880 stars 311 forks source link

ERROR ReferenceError: document is not defined when using Angular v18.x #420

Closed kuncevic closed 1 month ago

kuncevic commented 1 month ago

I've tried to integrate org-chart into an angular app.

Got a runtime error when running npm start: 

ERROR ReferenceError: document is not defined
    at OrgChart (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/d3-org-chart.js:739:12)
    at _D3OrgChartComponent.ngAfterViewInit (/Work/code/app/src/app/d3-org-chart/d3-org-chart.component.ts:29:20)
    at callHookInternal (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:16022:10)
    at callHook (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:16037:7)
    at callHooks (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:16011:9)
    at executeInitAndCheckHooks (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:15980:5)
    at refreshView (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20603:11)
    at detectChangesInView (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20689:5)
    at detectChangesInViewIfAttached (/Work/code//app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20672:3)
    at detectChangesInComponent (/Work/code//app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20666:3)
ERROR ReferenceError: document is not defined
    at OrgChart (/Work/code//app/.angular/cache/18.1.1/vite/deps_ssr/d3-org-chart.js:739:12)
    at _D3OrgChartComponent.ngAfterViewInit (/Work/code/app/src/app/d3-org-chart/d3-org-chart.component.ts:29:20)
    at callHookInternal (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:16022:10)
    at callHook (/Work/code//app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:16037:7)
    at callHooks (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:16011:9)
    at executeInitAndCheckHooks (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:15980:5)
    at refreshView (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20603:11)
    at detectChangesInView (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20689:5)
    at detectChangesInViewIfAttached (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20672:3)
    at detectChangesInComponent (/Work/code/app/.angular/cache/18.1.1/vite/deps_ssr/chunk-NE5JKMSW.js:20666:3)

here is a my repo https://github.com/kuncevic/org-chart-issue

git clone https://github.com/kuncevic/org-chart-issue
cd org-chart-issue
yarn
npm start
kuncevic commented 1 month ago

A bit more background. I am using SSR and seems this line causing a problem. In Angular native libraries usually you would solve by checking isPlatformBrowser().

However I've had to apply that fix in my client code. May be worthwhile referencing that in the docs.

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngAfterViewInit() {
    if (!this.chart) {
      if (isPlatformBrowser(this.platformId)) {
        this.chart = new OrgChart();
      }
    }
    this.updateChart();
  }