20

I am having troubles while importing the JSZip library in my Angular 2 project. I followed the following steps in order to change the project configuration:

1 - Install JSZip using NPM

npm install jszip --save

2 - Change systemjs.config.js as follows

var map = {
    ...
    'jszip':                      'node_modules/jszip/dist/jszip.min.js'
};

3 - Import the dependency within the component that requires it

import JSZip from 'jszip';

Then, I tried using the main JSZip constructor to attach some files, but I am getting a web error stating that the constructor is not defined. Besides, the Typescript editor I am using is not able to find the definition for it.

Did I miss something?

Thank you.

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
AlexKibo88
  • 827
  • 1
  • 6
  • 16

3 Answers3

48

For those who want to know how it ended, the problem was in the import. The following is the correct import:

import * as JSZip from 'jszip';

Then, it is used as follows:

let zipFile: JSZip = new JSZip();
user2814648
  • 421
  • 4
  • 12
AlexKibo88
  • 827
  • 1
  • 6
  • 16
  • 4
    If you're using JSZip 3.x you can also get the Typescript type definitions with: https://www.npmjs.com/package/@types/jszip – StephenD Nov 27 '17 at 09:18
  • I got this error when trying your solution Unexpected token ':' at Object../node_modules/setimmediate/setImmediate.js (main.js:32023) –  coinhndp Apr 12 '21 at 09:32
4

There is a typo and it should be:

import * as JSZip from 'jszip';
let zipFile: JSZip = new JSZip();
Yunfei Li
  • 121
  • 1
  • 2
0

With the current JSZip version (3.10.1), we need to use this command:

import JSZip from 'jszip';

then use:

let zipFile: JSZip = new JSZip();

After google for a while, I had to read the typescript code of JSZip to find out this. Hope this will help someone else.

Hua Thi Le
  • 1
  • 2