title: D3 Angular - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type
body: <p>I have a stackBlitz here - 
  <a href="https://stackblitz.com/edit/ng-divided-bar?embed=1&amp;file=src/app/bar-chart.ts&amp;hideNavigation=1" rel="nofollow noreferrer">https://stackblitz.com/edit/ng-divided-bar?embed=1&amp;file=src/app/bar-chart.ts&amp;hideNavigation=1</a></p>
  
  <p>I have a d3 chart here in Angular.</p>
  
  <p>Everything works here but in my actual app I'm getting the error</p>
  
  <pre><code>error TS2349: Cannot invoke an expression whose type lacks a call signature. Type
  </code></pre>
  
  <p>which relates to this code.</p>
  
  <pre><code>this.y.domain(
    d3.extent(
      d3.extent(data, (d) =&gt; {
        return d.start;    
      })
      .concat(d3.extent(data, (d) =&gt; {
        return d.finish;    
      })        
    )
  ));
  </code></pre>
  
  <p>My actual app uses Typescript 2.7.2</p>
  
  <p>Is this it do with the way I'm importing D3</p>
  
  <pre><code>import * as d3 from 'd3';   
  </code></pre>
  
  <p>If I remove the d3 import the error stops but I don't know how else to import d3</p>
  
  <p>The full error is</p>
  
  <pre><code>    ERROR in .component.ts(108,7): error TS2349: C
  annot invoke an expression whose type lacks a call signature. 
  Type '{ (...items: ConcatArray&lt;string&gt;[]): string[]; 
  (...items: (string | ConcatArray&lt;string&gt;)[]): stri...' has no compatible call signatures.
  </code></pre>