title: crossfilter2__WEBPACK_IMPORTED_MODULE_3__ is not a function
body: <p>I am trying to integrate dc.js Chart library in my angular project. I followed a link on SO which indicates how to integrate dc.js charts with angular2+ <a href="https://stackoverflow.com/questions/48104529/dc-js-charts-with-angular2">dc.js charts with Angular2+</a> . I ran the following line to install all the packages needed.</p>
  <p><code>npm i --save dc @types/dc crossfilter2 d3 @types/d3</code></p>
  <p>I have a basic angular project. My Angular version is 7, I'm also attaching my <code>app.component.html</code> , <code>app.component.ts</code>, <code>app.module.ts</code> , <code>package.json</code> and my <code>angular.json</code> files below.</p>
  <p><strong>app.component.html</strong></p>
  <p><code>&lt;div #nameOfDiv&gt;&lt;/div&gt;</code></p>
  <p><strong>app.component.ts</strong></p>
  <pre><code>import * as d3 from &quot;d3&quot;;
  import * as dc from &quot;dc&quot;;
  import * as crossfilter from &quot;crossfilter2&quot;;
  import { Dimension } from &quot;crossfilter2&quot;;
  
  interface Data {
    letter: string;
    frequency: number;
  }
  
  @Component({
    selector: &quot;app-root&quot;,
    templateUrl: &quot;./app.component.html&quot;,
    styleUrls: [&quot;./app.component.css&quot;]
  })
  export class AppComponent {
    @ViewChild(&quot;nameOfDiv&quot;, { static: false }) chartDiv: ElementRef;
  
    title = &quot;DC&quot;;
  
    private chart: dc.PieChart;
    private ndx: any = crossfilter&lt;Data&gt;([
      { letter: &quot;B&quot;, frequency: 2 },
      { letter: &quot;A&quot;, frequency: 10 }
    ]);
  
    paintChart(): void {
      this.chart = dc.pieChart(&quot;#pie&quot;);
      let dim = this.ndx.dimension((d: any) =&gt; d.letter);
      let group = dim.group().reduceCount();
      this.chart
        .width(200)
        .height(200)
        .dimension(dim)
        .group(group);
      dc.renderAll();
    }
  }
  </code></pre>
  <p><strong>app.module.ts</strong></p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p><strong>angular.json</strong></p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;DC&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {},
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;app&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;dist/DC&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;aot&quot;: false,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.css&quot;
              ],
              &quot;scripts&quot;: []
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;optimization&quot;: true,
                &quot;outputHashing&quot;: &quot;all&quot;,
                &quot;sourceMap&quot;: false,
                &quot;extractCss&quot;: true,
                &quot;namedChunks&quot;: false,
                &quot;aot&quot;: true,
                &quot;extractLicenses&quot;: true,
                &quot;vendorChunk&quot;: false,
                &quot;buildOptimizer&quot;: true,
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;2mb&quot;,
                    &quot;maximumError&quot;: &quot;5mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;6kb&quot;,
                    &quot;maximumError&quot;: &quot;10kb&quot;
                  }
                ]
              }
            }
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;DC:build&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;DC:build:production&quot;
              }
            }
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;DC:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.css&quot;
              ],
              &quot;scripts&quot;: []
            }
          },
          &quot;lint&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
            &quot;options&quot;: {
              &quot;tsConfig&quot;: [
                &quot;tsconfig.app.json&quot;,
                &quot;tsconfig.spec.json&quot;,
                &quot;e2e/tsconfig.json&quot;
              ],
              &quot;exclude&quot;: [
                &quot;**/node_modules/**&quot;
              ]
            }
          },
          &quot;e2e&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
            &quot;options&quot;: {
              &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
              &quot;devServerTarget&quot;: &quot;DC:serve&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;devServerTarget&quot;: &quot;DC:serve:production&quot;
              }
            }
          }
        }
      }},
    &quot;defaultProject&quot;: &quot;DC&quot;
  }
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;Test&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/common&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/compiler&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/core&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/forms&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/router&quot;: &quot;~8.2.14&quot;,
      &quot;@types/d3&quot;: &quot;^5.7.2&quot;,
      &quot;@types/dc&quot;: &quot;0.0.29&quot;,
      &quot;crossfilter2&quot;: &quot;^1.5.2&quot;,
      &quot;d3&quot;: &quot;^5.15.0&quot;,
      &quot;dc&quot;: &quot;^4.0.0&quot;,
      &quot;rxjs&quot;: &quot;~6.4.0&quot;,
      &quot;tslib&quot;: &quot;^1.10.0&quot;,
      &quot;zone.js&quot;: &quot;~0.9.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~0.803.21&quot;,
      &quot;@angular/cli&quot;: &quot;~8.3.21&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~8.2.14&quot;,
      &quot;@angular/language-service&quot;: &quot;~8.2.14&quot;,
      &quot;@types/node&quot;: &quot;~8.9.4&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.3.8&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
      &quot;codelyzer&quot;: &quot;^5.0.0&quot;,
      &quot;jasmine-core&quot;: &quot;~3.4.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
      &quot;karma&quot;: &quot;~4.1.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;~2.0.1&quot;,
      &quot;karma-jasmine&quot;: &quot;~2.0.1&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.4.0&quot;,
      &quot;protractor&quot;: &quot;~5.4.0&quot;,
      &quot;ts-node&quot;: &quot;~7.0.0&quot;,
      &quot;tslint&quot;: &quot;~5.15.0&quot;,
      &quot;typescript&quot;: &quot;~3.5.3&quot;
    }
  }
  
  </code></pre>
  <p>When I compile and run this project I see the following error.</p>
  <p><a href="https://i.stack.imgur.com/cJxm6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cJxm6.png" alt="Error : crossfilter2__WEBPACK_IMPORTED_MODULE_3__ is not a function" /></a></p>
  <p>How do I fix this issue?</p>