title: facing error while using angular-datatables
body: <p>I'm on ubuntu 20.04, with npm 6.14.15, node v14.17.2 and Angular CLI: 11.2.14. I tried to create data table into my working directory using angular-datatables module.</p>
  <p>in order to use this angular-datatables module, i had installed following packages.</p>
  <pre><code>npm install jquery --save
  npm install datatables.net --save
  npm install datatables.net-dt --save
  npm install angular-datatables --save
  npm install @types/jquery --save-dev
  npm install @types/datatables.net --save-dev
  </code></pre>
  <p>after i run the server, angular cli throw following of errors.</p>
  <p><strong>Error Message</strong></p>
  <pre><code>Error: node_modules/angular-datatables/src/angular-datatables.directive.d.ts:39:21 - error TS2694: Namespace '&quot;/home/nanthu/codoid-projects/dmk-youth-wing/DMK-Youth-Wing-Website/node_modules/@angular/core/core&quot;' has no exported member 'ɵɵFactoryDeclaration'.
  
  39     static ɵfac: i0.ɵɵFactoryDeclaration&lt;DataTableDirective, never&gt;;
                         ~~~~~~~~~~~~~~~~~~~~
  
  
  Error: node_modules/angular-datatables/src/angular-datatables.directive.d.ts:40:21 - error TS2694: Namespace '&quot;/home/nanthu/codoid-projects/dmk-youth-wing/DMK-Youth-Wing-Website/node_modules/@angular/core/core&quot;' has no exported member 'ɵɵDirectiveDeclaration'.
  
  40     static ɵdir: i0.ɵɵDirectiveDeclaration&lt;DataTableDirective, &quot;[datatable]&quot;, never, { &quot;dtOptions&quot;: &quot;dtOptions&quot;; &quot;dtTrigger&quot;: &quot;dtTrigger&quot;; }, {}, never&gt;;
                         ~~~~~~~~~~~~~~~~~~~~~~
  
  
  Error: node_modules/angular-datatables/src/angular-datatables.module.d.ts:13:21 - error TS2694: Namespace '&quot;/home/nanthu/codoid-projects/dmk-youth-wing/DMK-Youth-Wing-Website/node_modules/@angular/core/core&quot;' has no exported member 'ɵɵFactoryDeclaration'.
  
  13     static ɵfac: i0.ɵɵFactoryDeclaration&lt;DataTablesModule, never&gt;;
                         ~~~~~~~~~~~~~~~~~~~~
  
  
  Error: node_modules/angular-datatables/src/angular-datatables.module.d.ts:[93m14:21 - error TS2694: Namespace '&quot;/home/nanthu/codoid-projects/dmk-youth-wing/DMK-Youth-Wing-Website/node_modules/@angular/core/core&quot;' has no exported member 'ɵɵNgModuleDeclaration'.
  
  14     static ɵmod: i0.ɵɵNgModuleDeclaration&lt;DataTablesModule, [typeof i1.DataTableDirective], [typeof i2.CommonModule], [typeof i1.DataTableDirective]&gt;;
                         ~~~~~~~~~~~~~~~~~~~~~
  
  
  Error: node_modules/angular-datatables/src/angular-datatables.module.d.ts:15:21 - error TS2694: Namespace '&quot;/home/nanthu/codoid-projects/dmk-youth-wing/DMK-Youth-Wing-Website/node_modules/@angular/core/core&quot;' has no exported member 'ɵɵInjectorDeclaration'.
  
  15     static ɵinj: i0.ɵɵInjectorDeclaration&lt;DataTablesModule&gt;;
  </code></pre>
  <p>How do I resolve this issue to get Angular datatable?</p>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;dmk-youth-wing-website&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;~11.2.8&quot;,
      &quot;@angular/cdk&quot;: &quot;^12.2.5&quot;,
      &quot;@angular/common&quot;: &quot;~11.2.8&quot;,
      &quot;@angular/compiler&quot;: &quot;~11.2.8&quot;,
      &quot;@angular/core&quot;: &quot;~11.2.8&quot;,
      &quot;@angular/forms&quot;: &quot;~11.2.8&quot;,
      &quot;@angular/localize&quot;: &quot;~11.2.8&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~11.2.8&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~11.2.8&quot;,
      &quot;@angular/router&quot;: &quot;~11.2.8&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.36&quot;,
      &quot;@ng-bootstrap/ng-bootstrap&quot;: &quot;^9.1.3&quot;,
      &quot;@ng-select/ng-select&quot;: &quot;^7.2.0&quot;,
      &quot;@ngx-translate/core&quot;: &quot;^13.0.0&quot;,
      &quot;@ngx-translate/http-loader&quot;: &quot;^6.0.0&quot;,
      &quot;angular-datatables&quot;: &quot;^13.0.0&quot;,
      &quot;bootstrap&quot;: &quot;^4.5.0&quot;,
      &quot;datatables.net&quot;: &quot;^1.11.3&quot;,
      &quot;datatables.net-dt&quot;: &quot;^1.11.3&quot;,
      &quot;jquery&quot;: &quot;^3.6.0&quot;,
      &quot;ngx-slick-carousel&quot;: &quot;^0.5.1&quot;,
      &quot;ngx-spinner&quot;: &quot;^11.0.1&quot;,
      &quot;ngx-toastr&quot;: &quot;^14.1.1&quot;,
      &quot;rxjs&quot;: &quot;~6.6.0&quot;,
      &quot;slick-carousel&quot;: &quot;^1.8.1&quot;,
      &quot;subsink&quot;: &quot;^1.0.2&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;zone.js&quot;: &quot;~0.11.3&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~0.1102.7&quot;,
      &quot;@angular/cli&quot;: &quot;~11.2.7&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~11.2.8&quot;,
      &quot;@types/datatables.net&quot;: &quot;^1.10.21&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
      &quot;@types/jquery&quot;: &quot;^3.5.8&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;@types/owlcarousel&quot;: &quot;^1.3.5&quot;,
      &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
      &quot;jasmine-core&quot;: &quot;~3.6.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
      &quot;karma&quot;: &quot;~6.1.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
      &quot;protractor&quot;: &quot;~7.0.0&quot;,
      &quot;ts-node&quot;: &quot;~8.3.0&quot;,
      &quot;tslint&quot;: &quot;~6.1.0&quot;,
      &quot;typescript&quot;: &quot;~4.1.5&quot;
    }
  }
  </code></pre>
  <p><strong>angular.json</strong></p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;cli&quot;: {
      &quot;analytics&quot;: false
    },
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;DMK-Youth-Wing-Website&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&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/DMK-Youth-Wing-Website&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;: true,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;,
                &quot;node_modules/slick-carousel/slick/slick.scss&quot;,
                &quot;node_modules/slick-carousel/slick/slick-theme.scss&quot;,
                &quot;node_modules/datatables.net-dt/css/jquery.dataTables.css&quot;
              ],
              &quot;scripts&quot;: [
                &quot;node_modules/jquery/dist/jquery.min.js&quot;,
                &quot;node_modules/slick-carousel/slick/slick.min.js&quot;,
                &quot;node_modules/datatables.net/js/jquery.dataTables.js&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;namedChunks&quot;: false,
                &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;DMK-Youth-Wing-Website:build&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;DMK-Youth-Wing-Website: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;DMK-Youth-Wing-Website: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.scss&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;DMK-Youth-Wing-Website:serve&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;devServerTarget&quot;: &quot;DMK-Youth-Wing-Website:serve:production&quot;
              }
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;DMK-Youth-Wing-Website&quot;
  }
  </code></pre>