Issue with Angular 2 template when using d3 #1200

New Issue

fergalmoran · 2025-08-09T17:19:14Z

fergalmoran commented

2025-08-09 17:19:14 +00:00

Originally created by @Gimly on 12/7/2016

Hello,

Hopefully this question is not too off topic, but I'm getting a really weird issue with the yo aspnetcore-spa template when trying to use d3.js with it. The issue seems to be somehow linked to something in the template because the same code doesn't have the behaviour in an Angular CLI project.

I'm using d3.js to display a simple bar chart I found as an example online. It's a component that imports d3 and uses it to add an SVG and create the bar chart. When I access it through a link I added to the template's left menu, everything works fine, the chart is displayed just fine. But, if I try to access it directly through the URL I've configured as route for the component, I get this exception thrown:

Exception: Call to Node module failed with error: TypeError: Cannot read property 'createElementNS' of undefined
at Object.<anonymous> (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:9352:33)
at Object.<anonymous> (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:10129:39)
at Selection.selection_select [as select] (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:9561:53)
at Selection.selection_append [as append] (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:10128:18)
at BarchartComponent.createChart (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:474:39)
at BarchartComponent.ngOnInit (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:460:15)
at AppView._View_BarchartComponent_Host0.detectChangesInternal (BarchartComponent_Host.ngfactory.js:28:86)
at AppView.detectChanges (C:\sources\d3NetCoreAngular2\ClientApp\dist\vendor.js:12652:19)
at AppView.detectContentChildrenChanges (C:\sources\d3NetCoreAngular2\ClientApp\dist\vendor.js:12670:24)
at AppView.detectChangesInternal (C:\sources\d3NetCoreAngular2\ClientApp\dist\vendor.js:12662:19)

I'm really lost as to why there would be a difference between accessing the component through a link or directly. Could it be because of a server-side pre-rendering? Is there something else in the template that would make a difference between the two ways of accessing? I've tried adding a breakpoint in the typescript, if I access through the link, the breakpoint is triggered and the code stopped, but if I access directly (or if I refresh the page), then the breakpoint is not triggered and I get the exception.

Here are the important parts of the component's typescript:

...
@Component({
    selector: 'barchart',
    template: require('./barchart.component.html'),
    styles: [require('./barchart.component.css')],
    encapsulation: ViewEncapsulation.None
})
export class BarchartComponent implements OnInit, OnChanges, AfterViewInit {

    @ViewChild('chart')
    private chartContainer: ElementRef

    ...

    ngOnInit() {
        this.htmlElement = this.chartContainer.nativeElement;
        this.host = d3.select(this.htmlElement);
        let svg = this.host.append('svg')
            .attr('width', this.width + this.margin.left + this.margin.right)
            .attr('height', this.height + this.margin.top + this.margin.bottom);
        ...
    }
    ...
}

The html is pretty simple:

<div class="d3-chart" #chart></div>

I've uploaded the whole project in this project: https://github.com/Gimly/d3NetCoreAngular2

*Originally created by @Gimly on 12/7/2016* Hello, Hopefully this question is not too off topic, but I'm getting a really weird issue with the `yo aspnetcore-spa` template when trying to use d3.js with it. The issue seems to be somehow linked to something in the template because the same code doesn't have the behaviour in an Angular CLI project. I'm using d3.js to display a simple bar chart I found as an example online. It's a component that imports d3 and uses it to add an SVG and create the bar chart. When I access it through a link I added to the template's left menu, everything works fine, the chart is displayed just fine. But, if I try to access it directly through the URL I've configured as route for the component, I get this exception thrown: ``` Exception: Call to Node module failed with error: TypeError: Cannot read property 'createElementNS' of undefined at Object.<anonymous> (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:9352:33) at Object.<anonymous> (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:10129:39) at Selection.selection_select [as select] (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:9561:53) at Selection.selection_append [as append] (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:10128:18) at BarchartComponent.createChart (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:474:39) at BarchartComponent.ngOnInit (C:\sources\d3NetCoreAngular2\ClientApp\dist\main-server.js:460:15) at AppView._View_BarchartComponent_Host0.detectChangesInternal (BarchartComponent_Host.ngfactory.js:28:86) at AppView.detectChanges (C:\sources\d3NetCoreAngular2\ClientApp\dist\vendor.js:12652:19) at AppView.detectContentChildrenChanges (C:\sources\d3NetCoreAngular2\ClientApp\dist\vendor.js:12670:24) at AppView.detectChangesInternal (C:\sources\d3NetCoreAngular2\ClientApp\dist\vendor.js:12662:19) ``` I'm really lost as to why there would be a difference between accessing the component through a link or directly. Could it be because of a server-side pre-rendering? Is there something else in the template that would make a difference between the two ways of accessing? I've tried adding a breakpoint in the typescript, if I access through the link, the breakpoint is triggered and the code stopped, but if I access directly (or if I refresh the page), then the breakpoint is not triggered and I get the exception. Here are the important parts of the component's typescript: ```TypeScript ... @Component({ selector: 'barchart', template: require('./barchart.component.html'), styles: [require('./barchart.component.css')], encapsulation: ViewEncapsulation.None }) export class BarchartComponent implements OnInit, OnChanges, AfterViewInit { @ViewChild('chart') private chartContainer: ElementRef ... ngOnInit() { this.htmlElement = this.chartContainer.nativeElement; this.host = d3.select(this.htmlElement); let svg = this.host.append('svg') .attr('width', this.width + this.margin.left + this.margin.right) .attr('height', this.height + this.margin.top + this.margin.bottom); ... } ... } ``` The html is pretty simple: ```HTML <div class="d3-chart" #chart></div> ``` I've uploaded the whole project in this project: https://github.com/Gimly/d3NetCoreAngular2

fergalmoran closed this issue

2025-08-09 17:19:14 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1200