堆栈内存溢出
  繁体   English   中英

Angular 4 IE9文件上传Script438：对象不支持属性或方法“应用”

[英]Angular 4 IE9 file upload Script438:Object doesn't support property or method 'apply'

 原文  2017-06-23 06:54:18  2   1    javascript/ angular/ internet-explorer-9

问题描述

我使用Angular 4，并且在IE9中无法上传文件，请帮助我。

IE 9错误：TypeError：对象不支持属性或方法“应用”

IE 9错误图片

版： 

{
      "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 //我还包括来自“ https://angular.io/guide/browser-support ”的一些js 

<!doctype html>
<html>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/reset.css">
  <link rel="stylesheet" href="assets/css/index.css">

  <script src="assets/js/shim.min.js"></script>
  <script src="assets/js/classList.min.js"></script>
  <script src="assets/js/Blob.js"></script>
  <script src="assets/js/formdata.js"></script>
  <script src="assets/js/Intl.min.js"></script>
  <script src="assets/js/typedarray.js"></script>
  <script src="assets/js/core.min.js"></script>
  <script src="assets/js/es6-shim.min.js"></script>
  <script src="assets/js/shims_for_IE.js"></script>
  <script src="assets/js/system-polyfills.js"></script>
  <script src="assets/js/jquery-1.11.min.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

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';

上传-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后缀的证书';
    }
  }

上载cert.component.html 

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

上传-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);
      })
  }

1 个解决方案

解决方案1
 0  2017-08-03 08:59:43

根据我的经验，所有依赖项@angular应该具有保存版本（现在您已设置^ 4.0.0）。 对于polyfill，我使用了： 

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';

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 SCRIPT438：对象不支持属性或方法“创建”-IE9 SCRIPT438：对象不支持属性或方法IE SCRIPT438：SCRIPT438：对象不支持属性或方法“组件” SCRIPT438：对象不支持属性或方法“attr” SCRIPT438：对象不支持属性或方法&#39;join&#39; SCRIPT438：对象不支持属性或方法&#39;debug&#39; SCRIPT438：对象不支持属性或方法“可调整大小” SCRIPT438：对象不支持属性或方法“ forEach” SCRIPT438：Object 不支持属性或方法“循环” SCRIPT438：对象不支持属性或方法“addObject”
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM