ExcelImportExport in Angular 2 project 'window.require is not a function' error

ExcelImportExport in Angular 2 project 'window.require is not a function' error

Posted by: ssmith on 11 October 2017, 1:18 am EST

• 

  ssmith

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 October 2017, 1:18 am EST

  I’m using the current build of Wijmo (5.20172.359) in an Angular 2 project (Angular 4.4.4, TypeScript 2.5.3). Everything I’ve been using (FlexGrid, FlexPie, FlexCharts) works fine, however I’m trying to integrate the Excel Import functionality, and am using the ExcelImportExport project included in the TS/Angular2 Samples downloaded with the build, and I’m getting the following error on build:

  Uncaught TypeError: window.require is not a function
      at Object../node_modules/wijmo/wijmo.xlsx.js (app.js:86218)
      at __webpack_require__ (app.js:678)
      at fn (wijmo.grid.xlsx.js:13)
      at Object../node_modules/wijmo/wijmo.grid.xlsx.js (app.js:86158)
      at __webpack_require__ (app.js:678)
      at fn (wijmo.grid.xlsx.js:13)
      at Object../app/home/components/import-grid/import-grid.component.ts (app.js:12533)
      at __webpack_require__ (app.js:678)
      at fn (wijmo.grid.xlsx.js:13)
      at Object../app/home/home.module.ts (app.js:19226)
  
  

  I have the following imports in the component:

  import * as wjcGrid from 'wijmo/wijmo.grid';
  import * as wjcCore from 'wijmo/wijmo';
  import * as wjcXlsx from 'wijmo/wijmo.xlsx';
  import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';
  import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
  
  

  And the problem goes away if I remove the following:

  import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';
  
  

  However without wjcGridXlsx, the Excel import feature fails.

  I’m unclear how to resolve this.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 6:07 am EST

  Hi,
  
  Please be ensure that you have JSZip files in your project. If issue persists, please share a demo sample depicting your issue.

  Also, please let us know the NPMImages modules you are using in your project and project type: SystemJS/Webpack/AngularCLI

  ~Manish

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 9:07 am EST

  I’m using the wijmo-commonjs-min modules.

  It’s a Webpack project.

  I’ve added JSZip via npm, ( “jszip”: “^3.1.4” ) and am importing it as follows above the Wijmo imports in the component:

  import * as JSZip from 'jszip';
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 October 2017, 12:28 am EST

  Hi Smith,
  
  Please refer to the attached sample’s vendor.ts file which shows how to include JSZip as a module instead of including as a file in the project.

  ~Manish Kr Gupta

  FlexGrid_export_JSZIP_as_module.zip

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 13 October 2017, 11:12 am EST

  That fixed the problem - thanks!

  Not sure about the vendor.ts approach, but a import in the index.html solves the issue.