2017-06-23 2 views
0

Ich benutze Angular 4 und Datei-Upload nicht in IE9 arbeiten, bitte helfen Sie mir.Angular 4 IE9 Dateiupload Script438: Objekt unterstützt keine Eigenschaft oder Methode 'anwenden'

IE 9 Fehler: Typeerror: Objekt unterstützt keine Eigenschaft oder Methode 'anwenden'

IE 9 Error image

Version:

{ 
     "name": "fido", 
     "version": "0.0.0", 
     "license": "MIT", 
     "scripts": { 
     "ng": "ng", 
     "start": "webpack-dev-server --port=4200", 
     "build": "webpack", 
     "test": "karma start ./karma.conf.js", 
     "lint": "ng lint", 
     "e2e": "protractor ./protractor.conf.js", 
     "prepree2e": "npm start", 
     "pree2e": "webdriver-manager update --standalone false --gecko false --quiet" 
     }, 
     "private": true, 
     "dependencies": { 
     "@angular/animations": "^4.1.3", 
     "@angular/common": "^4.0.0", 
     "@angular/compiler": "^4.0.0", 
     "@angular/core": "^4.0.0", 
     "@angular/forms": "^4.0.0", 
     "@angular/http": "^4.0.0", 
     "@angular/platform-browser": "^4.0.0", 
     "@angular/platform-browser-dynamic": "^4.0.0", 
     "@angular/router": "^4.0.0", 
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26", 
     "bootstrap": "^4.0.0-alpha.2", 
     "classlist.js": "^1.1.20150312", 
     "core-js": "^2.4.1", 
     "intl": "^1.2.5", 
     "ng2-file-upload": "^1.2.1", 
     "rxjs": "^5.1.0", 
     "web-animations-js": "^2.2.5", 
     "zone.js": "0.8.5" 
     }, 
     "devDependencies": { 
     "@angular/cli": "1.0.3", 
     "@angular/compiler-cli": "^4.0.0", 
     "@types/jasmine": "2.5.38", 
     "@types/node": "~6.0.60", 
     "codelyzer": "~2.0.0", 
     "jasmine-core": "~2.5.2", 
     "jasmine-spec-reporter": "~3.2.0", 
     "karma": "~1.4.1", 
     "karma-chrome-launcher": "~2.1.1", 
     "karma-cli": "~1.0.1", 
     "karma-jasmine": "~1.1.0", 
     "karma-jasmine-html-reporter": "^0.2.2", 
     "karma-coverage-istanbul-reporter": "^0.2.0", 
     "protractor": "~5.1.0", 
     "ts-node": "~2.0.0", 
     "tslint": "~4.5.0", 
     "typescript": "~2.2.0", 
     "webpack-dev-server": "~2.4.2", 
     "webpack": "~2.2.0", 
     "autoprefixer": "^6.5.3", 
     "css-loader": "^0.28.1", 
     "cssnano": "^3.10.0", 
     "exports-loader": "^0.6.3", 
     "file-loader": "^0.10.0", 
     "json-loader": "^0.5.4", 
     "karma-sourcemap-loader": "^0.3.7", 
     "less-loader": "^4.0.2", 
     "postcss-loader": "^1.3.3", 
     "postcss-url": "^5.1.2", 
     "raw-loader": "^0.5.1", 
     "sass-loader": "^6.0.3", 
     "script-loader": "^0.7.0", 
     "source-map-loader": "^0.1.5", 
     "istanbul-instrumenter-loader": "^2.0.0", 
     "style-loader": "^0.13.1", 
     "stylus-loader": "^3.0.1", 
     "url-loader": "^0.5.7" 
     } 
    } 

index.html // I enthalten auch einige js von "https://angular.io/guide/browser-support"

polyfills.ts

/** 
* This file includes polyfills needed by Angular and is loaded before the app. 
* You can add your own extra polyfills to this file. 
* 
* This file is divided into 2 sections: 
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main 
*  file. 
* 
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that 
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 
* 
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 
*/ 

/*************************************************************************************************** 
* BROWSER POLYFILLS 
*/ 

/** IE9, IE10 and IE11 requires all of the following polyfills. **/ 
import 'core-js/es6/symbol'; 
import 'core-js/es6/object'; 
import 'core-js/es6/function'; 
import 'core-js/es6/parse-int'; 
import 'core-js/es6/parse-float'; 
import 'core-js/es6/number'; 
import 'core-js/es6/math'; 
import 'core-js/es6/string'; 
import 'core-js/es6/date'; 
import 'core-js/es6/array'; 
import 'core-js/es6/regexp'; 
import 'core-js/es6/map'; 
import 'core-js/es6/set'; 

/** IE10 and IE11 requires the following for NgClass support on SVG elements */ 
import 'classlist.js'; // Run `npm install --save classlist.js`. 

/** IE10 and IE11 requires the following to support `@angular/animation`. */ 
import 'web-animations-js'; // Run `npm install --save web-animations-js`. 


/** Evergreen browsers require these. **/ 
import 'core-js/es6/reflect'; 
import 'core-js/es7/reflect'; 


/** ALL Firefox browsers require the following to support `@angular/animation`. **/ 
import 'web-animations-js'; // Run `npm install --save web-animations-js`. 



/*************************************************************************************************** 
* Zone JS is required by Angular itself. 
*/ 
import 'zone.js/dist/zone'; // Included with Angular CLI. 



/*************************************************************************************************** 
* APPLICATION IMPORTS 
*/ 

/** 
* Date, currency, decimal and percent pipes. 
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 
*/ 
import 'intl'; // Run `npm install --save intl`. 
/** 
* Need to import at least one locale-data with intl. 
*/ 
import 'intl/locale-data/jsonp/en'; 

Upload-cert.component.ts

constructor(public fb: FormBuilder, public _passwordAndUploadCert: UploadCertService) { } 

    uploadCert(){ 
    if(this.formErrors.certFormError == '' && this.certFile){ 
     this._passwordAndUploadCert.uploadCert(this.certFile) 
      .subscribe(
      data => console.log(data+'-----'), 
      error => console.log(error+'error!!!') 
     ) 
    } 
    } 

    selectedFileOnChanged(event:any) { 
    this.formErrors.certFormError = ''; 
    this.certName = event.target.value; 
    this.certFile = event.target.files[0]; 

    if(this.certFile.size > 1024*1024*8){ 
     this.formErrors.certFormError = '文件大小上传大于8Mb。' 
    } 
    else if(this.certFile.type != "application/x-x509-ca-cert" && this.certFile.type != "application/x-pkcs12"){ 
     this.formErrors.certFormError = '必须上传.cer或.pfx后缀的证书'; 
    } 
    } 

Upload-cert.component.html

<button type="submit" class="btn btn-primary" (click)="uploadCert()">上传</button> 
<input type="file" (change)="selectedFileOnChanged($event)" id="upload_input"/> 

Upload-cert.service.ts

public uploadCert(file:File){ 
    let formData:FormData = new FormData(); 
    formData.append('uploadFile' , file , file.name); 
    let headers= new Headers(); 
    headers.append('Content-Type', 'multipart/form-data'); 
    headers.append('Accept', 'application/json'); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http 
     .post(this.certUrl , formData , options) 
     .map((res: Response) => { 
      console.log(res); 
     }) 
    } 

Antwort

0

Aus meiner Erfahrung alle Abhängigkeiten @angular die Versionen speichern haben sollte (jetzt haben Sie gesetzt^4.0.0). Für Polyfills verwendete ich:

import 'html5-history-api'; 
import 'ie-shim'; 
// import 'raf'; 
// import 'core-js/client/shim'; 

/** IE9, IE10 and IE11 requires all of the following polyfills. **/ 
import 'core-js/es6/symbol'; 
import 'core-js/es6/object'; 
import 'core-js/es6/function'; 
import 'core-js/es6/parse-int'; 
import 'core-js/es6/parse-float'; 
import 'core-js/es6/number'; 
import 'core-js/es6/math'; 
import 'core-js/es6/string'; 
import 'core-js/es6/date'; 
import 'core-js/es6/array'; 
import 'core-js/es6/regexp'; 
import 'core-js/es6/map'; 
import 'core-js/es6/set'; 
import 'core-js/es6/weak-map'; 
import 'core-js/es6/weak-set'; 
import 'core-js/es6/typed'; 

import 'rxjs/bundles/Rx'; 
// import '@angular/core/bundles/core.umd'; 
import '@angular/common/bundles/common.umd'; 
import '@angular/compiler/bundles/compiler.umd'; 
import '@angular/platform-browser/bundles/platform-browser.umd'; 
import '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd' 



/** IE10 and IE11 requires the following for NgClass support on SVG elements */ 
// import 'classlist.js'; // Run `npm install --save classlist.js`. 

/** IE10 and IE11 requires the following to support `@angular/animation`. */ 
// import 'web-animations-js'; // Run `npm install --save web-animations-js`. 


/** Evergreen browsers require these. **/ 
import 'core-js/es6/reflect'; 
import 'core-js/es7/reflect'; 


/** ALL Firefox browsers require the following to support `@angular/animation`. **/ 
import 'web-animations-js'; // Run `npm install --save web-animations-js`. 



/*************************************************************************************************** 
* Zone JS is required by Angular itself. 
*/ 
import 'zone.js/dist/zone'; // Included with Angular CLI. 
import 'zone.js/dist/long-stack-trace-zone'; 
Verwandte Themen