在Angular 2中使用jszip [英] Using jszip with angular 2

问题描述

我正在尝试在angular 2中实现 JsZip ，以便我可以压缩用户上传的zip文件，但是似乎无法使其正常工作.

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.

在我的Visual Studio代码中，当我得到以下提示时似乎很高兴:

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

C中的错误:/wamp/www/nationalgrid/public_cli/src/app/app.module.ts(26,24):找不到模块'jszip'.

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

我查看并尝试了堆栈溢出中的建议，其中用户指出了什么导入使用的语句

任何建议都将不胜感激.如果某人在plunker中有一个可行的例子，那是最好的.

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

Appmodule代码:

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 { }

我的systemjs.config.js文件的一部分:

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文件

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"
  }
}

感谢一百万 安迪

推荐答案

所提供的所有信息均表明已遵循正确的安装和导入过程.我已经复制了步骤，没有任何编译错误.

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

该错误消息指出npm安装存在故障，请检查以下内容

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

• 打开项目的package.json ，看看是否有以下行

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

如果您的版本不同，请告诉我.

Let me know if your version is different.

在项目的node_modules文件夹中查看jszip子文件夹. 在jszip文件夹中打开package.json ，看看它是否有这一行

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",

打开lib/index.js，看到第一行是

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

function JSZip() {  

最后一行是

module.exports = JSZip;

如果一切都很好，请尝试其他方法

If all of that is good, other things to try

• 卸载并重新安装jszip
• 尝试安装并在一个干净的项目上编译
• 检查您的angular/cli版本，确保它不太旧
• 在全局级别(-g)卸载并重新安装angular/cli，然后重复新的项目测试.

顺便说一句，大小写很重要-我注意到执行步骤的SO问题在构造函数调用中有不正确的大小写，但这会产生不同的错误.

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.

 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

这篇关于在Angular 2中使用jszip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！