Using jszip with angular 2

Question

I am trying to implement JsZip in angular 2 so I can zip files users have uploaded but cannot seem to get it to work.

In my visual studio code it seems happy when I complile I get:

ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/app.module.ts (26,24): Cannot find module 'jszip'.

I have looked at and tried what was suggested in stack overflow where user states what import statements to use

Any advice or suggestions would be greatly appreciated. If someone has a working example in plunker that would be best.

Appmodule code:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BsDropdownModule, PaginationModule, TabsModule} from 'ng2-bootstrap';
import { CustomFormsModule } from 'ng2-validation';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { DatePickerModule } from 'ng2-datepicker';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpService } from './services/http.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ToasterModule, ToasterService } from 'angular2-toaster';
import { RouterModule } from '@angular/router';
import { DataTablesModule } from 'angular-datatables';


//Third Party Components
import { CookieService } from 'angular2-cookie/core';
import { FileSelectDirective, FileDropDirective} from 'ng2-file-upload';
import { ChartsModule } from 'ng2-charts';
import { ToastModule } from 'ng2-toastr';
import { JWBootstrapSwitchModule } from 'jw-bootstrap-switch-ng2';
import { BsModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
import { SelectModule} from 'ng2-select';
import * as JSZip from 'jszip';

//Needed for special routes handling - 
import { routing } from './app.routing';
import { Routes} from '@angular/router';
const routes: Routes = [];


/*** Project Imports ***/

/*!! Grids !!*/
import { UserListGrid} from './grid/index';
import { FileListGrid} from './grid/index';
import { ReportByAccessLogsListGrid} from './grid/index';
import { ReportByCompanyListGrid} from './grid/index';
import { ReportByUserListGrid} from './grid/index';
import { ReportByTotalsListGrid} from './grid/index';
import { ReportByBusinessclassListGrid} from './grid/index';

/*!! Models !!*/


/*!! Services !!*/

    /*!! Admin Area  !!*/

/* Admin Options*/
import { UserService } from './services/index';
import { FileListService } from './services/index';
import { ManageUserService } from './services/index';


/* other areas*/
import { UserAuthService } from './services/index';
import { RenewalDocumentService } from './services/index';
import { RenewalOptionsService } from './services/index';
import { RememberMeService } from './services/index';
import { AppMessagingService } from './services/index';
import { LoaderService,  ExportToExcel} from './services/index';

import { JszipComponent } from './adminarea/admin_options/zipfiles/jszip.component';

/** AppCompoent import must always be the last import to ensure it have everything above **/
import { AppComponent } from './app.component';


@NgModule({
  declarations:
  [
    /* App Components*/
    AppComponent,

    /* !!! System Imports !!! */
    FileDropDirective, FileSelectDirective,

    /*!! Admin Area  !!*/  
    JszipComponent,

    TestUserComponent,

  ...
  ],


imports: [

/* !!! System Imports !!! */
  JSZip,
  ToastModule,
  ChartsModule,
  TabsModule,
  BsModalModule,
  BrowserModule,
  FormsModule,
  HttpModule,
  DataTablesModule.forRoot(),
  ToasterModule,
  SelectModule,
  NgbModule.forRoot(),
  BsDropdownModule.forRoot(),
  CustomFormsModule,
  Ng2TableModule,
  PaginationModule.forRoot(),
  DatePickerModule,
  ReactiveFormsModule,
  JWBootstrapSwitchModule,
  // Add routes to the app routing should always be the last import
  routing,
  RouterModule.forRoot(routes, { useHash: true })
  ],


  entryComponents:
  [

  ],

  providers: 
  [
    /* !!! System Providers !!! */

    /* !!! Project Providers !!! */

    UserAuthService,
    AppMessagingService,
    CookieService,
    RememberMeService,
    ToasterService,
    ExportToExcel,
    HttpService,
    LoaderService,
    .

    /*!! Admin Area  !!*/
    /* Admin Options*/
    UserListGrid,
    UserService,
    FileListGrid,
    FileListService,
    ManageUserService,


    { provide: 'apiBase', useValue: 'http://localhost:81/NationalGrid/ci_ngi/api/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

part of my systemjs.config.js file:

   /**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      //app: 'app',
      app: 'ts_js/app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'ng2-file-upload': 'npm:ng2-file-upload',
      'ng2-uploader': 'npm:ng2-uploader',
      'ng2-toastr': 'npm:ng2-toastr',
      'ng2-charts': 'npm:ng2-charts',
      'angular2-cookie':            'npm:angular2-cookie',
      'ng2-pagination':            'npm:ng2-pagination',
      'ng2-bs3-modal':            'npm:ng2-bs3-modal',
      'jszip':                    'node_modules/jszip/dist/jszip.min.js'
    },

package.json file

    {
  "name": "ngi-app",
  "version": "2.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.3.1",
    "@angular/compiler": "2.3.1",
    "@angular/core": "2.3.1",
    "@angular/forms": "2.3.1",
    "@angular/http": "2.3.1",
    "@angular/platform-browser": "2.3.1",
    "@angular/platform-browser-dynamic": "2.3.1",
    "@angular/router": "3.3.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
    "@types/file-saver": "0.0.1",
    "@types/jspdf": "1.1.31",
    "@types/lodash": "4.14.50",
    "@types/xlsx": "0.0.34",
    "angular-datatables": "2.3.0",
    "angular2-cookie": "^1.2.5",
    "angular2-multiselect-checkbox-dropdown": "^1.5.0",
    "angular2-select": "1.0.0-beta.3",
    "angular2-toaster": "3.0.1",
    "body-parser": "1.17.1",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.4.0",
    "child_process": "1.0.2",
    "core-js": "^2.4.1",
    "datatables.net": "1.10.13",
    "datatables.net-dt": "1.10.13",
    "file-saver": "1.3.3",
    "https": "1.0.0",
    "jquery": "3.2.1",
    "json2csv": "3.7.3",
    "jspdf": "1.3.3",
    "jspdf-autotable": "2.3.2",
    "jszip": "^3.1.4",
    "jw-bootstrap-switch-ng2": "^1.0.4",
    "lodash": "4.17.4",
    "moment": "2.18.1",
    "moment-timezone": "0.5.13",
    "multer": "1.3.0",
    "mysql": "2.13.0",
    "ng2-bootstrap": "1.6.1",
    "ng2-bs-dropdown": "0.7.0",
    "ng2-bs3-modal": "^0.11.10",
    "ng2-charts": "1.4.1",
    "ng2-datepicker": "1.8.3",
    "ng2-file-upload": "1.1.4-2",
    "ng2-pagination": "1.0.1",
    "ng2-select": "^1.2.0",
    "ng2-slimscroll": "1.3.2",
    "ng2-toastr": "1.3.2",
    "ng2-validation": "3.9.1",
    "ng2-validators": "2.1.1",
    "node-cron": "1.1.3",
    "nodemailer": "4.0.1",
    "primeng": "^4.2.1",
    "rand-token": "0.3.0",
    "rxjs": "5.3.0",
    "swig": "1.4.2",
    "tls": "0.0.1",
    "ts-helpers": "^1.1.1",
    "ts-xlsx": "0.0.11",
    "typings": "^2.0.1",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.3.1",
    "@types/datatables.net": "1.10.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "2.0.41",
    "@types/moment": "2.13.0",
    "@types/moment-timezone": "0.2.34",
    "@types/node": "^6.0.42",
    "angular-2-dropdown-multiselect": "1.0.8",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "nodemon": "1.11.0",
    "protractor": "4.0.13",
    "ts-node": "1.2.1",
    "tslint": "4.3.0",
    "typescript": "2.0.3",
    "typings": "^2.0.1",
    "webdriver-manager": "10.2.5",
    "webpack": "3.4.1"
  }
}

Thanks a million Andy

Answer 1

All the info given indicates the correct install and import procedure has been followed. I've reproduced the steps and got no compile error.

The error message points to a fault in the npm install, could you please check the following

• Open package.json of your project and see if the following line is there

  "dependencies": {
    ...
    "jszip": "^3.1.4",
  

  Let me know if your version is different.
  
  

• Take a look in the node_modules folder of the project for the jszip sub-folder. Open the package.json in the jszip folder and see if it has this line

  "main": "./lib/index",
  

• Open lib/index.js and see that the first functional line is

  function JSZip() {  
  

  and the last line is

  module.exports = JSZip;
  

  
  

If all of that is good, other things to try

• uninstalling and re-installing jszip
• try the install and compile on a clean project
• check your version of angular/cli, make sure it's not too old
• uninstall and re-install angular/cli at global level (-g), then repeat new project test.

BTW, case matters - I notice the SO question where you got the steps has an incorrect case in the constructor call, but that produces a different error.

ng version tested with JSZip, imports ok

 test-project>ng version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.0
node: 6.10.3
os: win32 x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/material: 2.0.0-beta.7
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.4