将 jszip 与 Angular 2 一起使用答案

【问题标题】：Using jszip with angular 2将 jszip 与 Angular 2 一起使用
【发布时间】：2018-03-24 11:29:06
【问题描述】：

我正在尝试在 Angular 2 中实现 JsZip ，以便我可以压缩用户上传但似乎无法正常工作的文件。

在我的 Visual Studio 代码中，当我编译时似乎很高兴：

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

我已经查看并尝试了stack overflow where user states what import statements to use中的建议

任何意见或建议将不胜感激。如果有人在 plunker 中有一个工作示例，那将是最好的。

应用模块代码：

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 文件的一部分：

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

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

感谢一百万安迪

【问题讨论】：

你是如何安装 jszip 的，能否请你显示 app.module.ts。
嗨，Richard，感谢刚从休假回来的评论，我使用 npm 安装 jszip，下面是应用模块： ... import * as JSZip from 'jszip'; ...从'./adminarea/admin_options/zipfiles/jszip.component'导入{JszipComponent}； @NgModule({ 声明：[ JszipComponent ... ]，导入：[ JSZip ...] 如果您需要更多信息，那么可能需要附加一个文件谢谢安迪
您可以编辑问题并粘贴代码。您显示的内容看起来不错，我想下一个问题是 - app,module.ts 的第 26 行是什么
我在上面添加了我的应用程序模块代码，但删除了一些与缩短无关的导入等。 App模块的第26行是“import * as JSZip from 'jszip';”

标签： angular jszip

【解决方案1】：

所有给出的信息都表明已遵循正确的安装和导入程序。我已经重现了这些步骤，没有编译错误。

错误信息表明 npm install 出现错误，请您检查以下内容

打开你项目的 package.json 看看是否有下面一行
```
"dependencies": {
  ...
  "jszip": "^3.1.4",
```
如果您的版本不同，请告诉我。
查看项目的 node_modules 文件夹中的 jszip 子文件夹。打开jszip文件夹中的package.json看看有没有这行
```
"main": "./lib/index",
```
打开lib/index.js，看到第一个功能行是
```
function JSZip() {  
```
最后一行是
```
module.exports = JSZip;
```

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

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

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

ng 版本用 JSZip 测试，导入正常

 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

【讨论】：

感谢理查德的回复，我已经检查了您的上述观点，它们似乎都是正确且存在的。我将进行卸载并重新安装，看看会发生什么。我无法解决的一个问题是 jszip 期望的 angular-cli 版本是什么？如果重新安装或清理项目有效，会通知您谢谢
当我运行安装时，我收到这些消息，其中一个可能是问题：ngi-app@2.0.0 C:\wamp\www\ng\public_cli +-- UNMET PEER DEPENDENCY @ angular/common@2.3.1 +-- UNMET 对等依赖 @angular/compiler@2.3.1 +-- UNMET 对等依赖 @angular/core@2.3.1 +-- UNMET 对等依赖 @angular/forms@2.3.1 + -- jszip@3.1.4 | +-- 核心js@2.3.0 | +-- es6-promise@3.0.2 | +-- 谎言@3.1.1 | | -- immediate@3.0.6 | +-- pako@1.0.6 | --可读流@2.0.6 | -- string_decoder@0.10.31 +-- UNMET PEER DEPENDENCY rxjs@5.3.0 -- 未满足的同行依赖 tslint@4.3.0
当你得到“UNMET PEER DEPENDENCY”时，这意味着没有安装某些东西。在上面的消息中，看起来大部分 Angular 都没有安装。您必须提供有关您采取的步骤的确切详细信息。
另外，我的第一个建议是检查各种配置 - 你这样做了吗？
嗨理查德，是的，我确实检查了你所有的配置点，它们都是 100% 正确的，我刚刚用 systemjs.config.js 文件的一部分更新了主帖子，以防我做了什么在我发现关于安装 JSZip 的 SO 帖子中的错误是该人提到编辑该文件，我想知道我是否做错了什么。