title: Using jszip with angular 2
body: <p>I am trying to implement <a href="https://stuk.github.io/jszip/" rel="nofollow noreferrer">JsZip </a> in angular 2 so I can zip files users have uploaded but cannot seem to get it to work.</p>
  
  <p>In my visual studio code it seems happy when I complile I get:</p>
  
  <p>ERROR in C:/wamp/www/nationalgrid/public_cli/src/app/app.module.ts (26,24): Cannot find module 'jszip'.</p>
  
  <p>I have looked at and tried what was suggested in <a href="https://stackoverflow.com/questions/43097159/import-jszip-in-angular-2-project">stack overflow where user states what import statements to use</a></p>
  
  <p>Any advice or suggestions would be greatly appreciated. If someone has a working example in plunker that would be best.</p>
  
  <p>Appmodule code:</p>
  
  <pre><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 { }
  </code></pre>
  
  <p>part of my systemjs.config.js file:</p>
  
  <pre><code>   /**
   * 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'
      },
  </code></pre>
  
  <p>package.json file</p>
  
  <pre><code>    {
    "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"
    }
  }
  </code></pre>
  
  <p>Thanks a million
  Andy</p>