我正在尝试在角度2中实现JsZip ，因此我可以压缩用户上传的文件，但似乎无法让它工作。
在我的视觉工作室代码中，当我得到complile时，它似乎很高兴：
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中有一个最好的例子。
Appmodule代码：
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"
}
}
万分感谢 安迪
答案 0 :(得分：0)
所有给出的信息表明正确的安装和导入程序已被遵循。我已经复制了这些步骤并且没有编译错误。
错误消息指向npm安装中的错误，请您检查以下内容
打开项目的package.json 并查看以下行是否存在
"dependencies": {
...
"jszip": "^3.1.4",
如果您的版本不同，请告诉我
查看项目的node_modules文件夹中的jszip子文件夹。 打开jszip文件夹中的package.json ，看看它是否有这行
"main": "./lib/index",
打开lib / index.js并看到第一个功能行是
function JSZip() {
，最后一行是
module.exports = 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