Import JSZip in Angular 2 project

Question

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.

Enclitic

Answer 1

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();

Enclitic

If you're using JSZip 3.x you can also get the Typescript type definitions with: npmjs.com/package/@types/jszip – Peptize

I got this error when trying your solution Unexpected token ':' at Object../node_modules/setimmediate/setImmediate.js (main.js:32023) – Moten

Answer 2

There is a typo and it should be:

import * as JSZip from 'jszip';
let zipFile: JSZip = new JSZip();

Floweret

Answer 3

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.

Livesay