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
