角度エラー2のIEエラー

Question

私は私のHTMLページ上のバインディングの問題に関するこのIEのエラーについて助けが必要です。 私はIE 11とAngular 2を使用しています。ChromeとFirefoxではエラーはありませんが、IE 11でこれには というエラーがあります。私はどこに正確なエラーが私のページに位置しているかをトレースすることはできませんが、私はそれがエラーのこの部分のために私のHTMLページのどこかにあることを知っています。

View_EdataReportingComponent0.prototype.detectChangesInternalで（機能コード：2933：5）

ここでエラーを示すIEでコンソールからのスクリーンショットです。

そして、ここに私のHTMLページがあります...

<div class="main-header row px-0"> 
     <div class="upload-bar" *ngIf="(uploader.progress || 0) > 0 || isUploadFinished"> 
      <span class="caption-left"> 
       <i class="fa fa-upload" aria-hidden="true"></i> Uploading files <b>({{(uploader.progress || 0)}}%)</b> 
      </span> 
      <span class="caption-right file-list"> 
       <i class="mlcons_filled_close" (click)="abortUploadingFiles($event)" aria-hidden="true"></i> 
       <a href="#" class="a-link" (click)="abortUploadingFiles($event)" tabindex="0">Cancel</a> 
      </span> 
      <div class="upload-progress" [ngStyle]="{ 'width': (uploader.progress || 0) + '%' }"> </div> 
     </div> 
    <div class="container-fluid"> 
     <div class="main-body container"> 
      <h2 class="pull-left">eData Reporting</h2> <!-- <hermes-toast></hermes-toast> --> 
     </div> 
     <form (ngSubmit)="onSubmit(modalForm.value, $event)" [formGroup]="modalForm" name="eDataReportForm" #eDataReportForm="ngForm">  
      <div class="form-group col-md-6 col-lg-6 px-0-left data-form"> 
       <div class="form-group col-md-12 col-lg-12"> 
        <div class="col-md-4 px-0 form-label"> 
         <label for="reportingFrequency" class="label-Names- label-inline">Reporting Frequency:</label> 
        </div> 
        <div class="col-md-8 px-0"> 
         <div *ngIf="modalMode == modalModes.EditMode"> 
          <select id="report-frequency" class="form-control" formControlName="reportingFrequency" (change)="setReportingFrequency()" tabindex="0"> 
           <option value="null">Please Select</option> 
           <option *ngFor="let reportingFrequency of reportingFrequencies" [value]="reportingFrequency.FieldValueKey">{{reportingFrequency.DisplayName}}</option> 
          </select> 
         </div> 
         <div id="report-freq-viewmode" *ngIf="modalMode == modalModes.ViewMode" class="view-mode" > 
          {{originaleDataReport?.reportingFrequencyName && originaleDataReport.reportingFrequencyName()}} 
         </div> 

        </div> 

       </div> 
       <div class="form-group col-md-12 col-lg-12" *ngIf="(this.originaleDataReport.reportingFrequencyName && this.originaleDataReport.reportingFrequencyName())=='Yes - Other' || freqReport=='Yes - Other' "> 
        <div class="col-md-4 px-0 form-label"> 
         <label for="other" class="label-Names- label-inline" [class.required-field]="modalMode != modalModes.ViewMode">Other:</label> 
        </div> 
        <div class="col-md-8 px-0"> 
         <div *ngIf="modalMode == modalModes.EditMode"> 
          <input id="other" maxlength="50" formControlName="other" type="text" class="form-control" (keydown)="otherValue($event)" tabindex="0"> 
          <div *ngIf="modalForm.controls.other.invalid && modalForm.controls.other.touched" class="alert-danger"> 
           <span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Other is required. 
          </div> 
         </div> 
         <div *ngIf="modalMode == modalModes.ViewMode " class="view-mode" > 
          {{originaleDataReport?.FrequencyOtherNote}} 
         </div> 
        </div> 
       </div> 

       <div class="form-group col-md-12 col-lg-12"> 
        <div class="col-md-12 col-lg-12 px-0"> 
         <div class="col-md-4 px-0 form-label"> 
          <label for="report-type" class="label-Names- label-inline">Type of Report:</label> 
         </div> 
         <div class="col-md-8 px-0"> 
          <div *ngIf="modalMode == modalModes.EditMode"> 
           <select id="report-type" class="form-control" formControlName="typeOfReport" (change)="setTypeOfReport()" tabindex="0"> 
            <option value="null">Please select</option> 
            <option *ngFor="let item of typeofReports" [value]="item.FieldValueKey">{{item.DisplayName}}</option> 
           </select> 
          </div> 
          <div *ngIf="modalMode == modalModes.ViewMode" class="view-mode" > 
           {{originaleDataReport?.typeofReportsName && originaleDataReport.typeofReportsName()}} 
          </div> 

         </div> 
        </div> 
       </div> 

       <div class="col-md-12 col-lg-12 " *ngIf="(this.originaleDataReport.typeofReportsName && this.originaleDataReport.typeofReportsName())=='Other' || typeReport=='Other'">     
         <br /> 
         <div *ngIf="modalMode == modalModes.ViewMode " class="col-md-11 px-0 px-30-right"> 
          <label class="label-Names- label-inline">Sample Report:</label> 
          <div *ngFor="let item of fileAttachment" class="file-list"> 
           <div *ngIf="item?.Sample_Report?.FileName"> 
            <a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)"> 
             <file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon> 
            </a> 
            <span class="file-info"> 
             <label class="label-Names- label-inline"> 
              <a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link"> 
               {{ item?.Sample_Report?.FileNameDisplay }} 
              </a> 
             </label> 
            </span> <b>({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b> 
           </div> 
          </div> 
         </div> 

         <div *ngIf="modalMode == modalModes.EditMode " class="col-md-12 col-lg-12 px-0 px-30-right "> 
          <label for="file-upload" class="label-Names-upload">Sample Report</label> <label class="max-size-limit-label">(Maximum file size is 20MB.)</label> 
          <div *ngFor="let item of fileAttachment;" class="added" tabindex="0"> 
           <div *ngIf="item?.Sample_Report?.FileName && !isSetforRemoval"> 
            <a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="pull-left" tabindex="-1"> 
             <file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon> 
            </a> 
            <span class="file-info pull-left"> 
             <label class="label-Names- label-inline file-limit"> 
              <a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link" tabindex="-1"> 
               {{ item?.Sample_Report?.FileNameDisplay }} 
              </a> 
             </label> 

            </span> <b class="pull-left">({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b> 

            <a href="#" (click)="setToRemoveSampleFile($event)" class="a-link pull-right" tabindex="-1">Remove</a> 
            <i class="mlcons_filled_close pull-right" aria-hidden="true" tabindex="-1" (click)="setToRemoveSampleFile($event)"></i> 
           </div> 
           <div *ngIf="isSetforRemoval"> 
            <span class="file-limit pull-left"><b> {{ item?.Sample_Report?.FileNameDisplay }} &nbsp;</b></span> 
            <a href="#" (click)="KeepFileAttachment($event)" class="a-link pull-right">Keep File</a> 
            <i class="mlcons_stroke_refresh pull-right" aria-hidden="true" (click)="KeepFileAttachment($event)"></i> 
            <span class="pull-left"> will be removed when you save.</span> 
           </div> 
          </div> 

          <br /> 
          <div id="file-upload" ng2FileDrop 
           [class.file-over]="hasDropZoneOver" 
           (fileOver)="fileOver($event)" 
           [uploader]="uploader" 
           class="well drop-zone" *ngIf="fileEmpty == null"> 
           <div class="form-group col-md-12 col-lg-12 "> 
            <div class="col-md-2 col-lg-2 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0"> 
             <div class="change-icon" *ngIf="uploadStatus == uploadStates.Ready"> 
              <span class="mlcons_stroke_add_doc"> 
               <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span> 
              </span> 
              <span class="mlcons_stroke_upload_doc"> 
               <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span> 
              </span> 
             </div> 
             <span *ngIf="uploadStatus == uploadStates.Failed" class="mlcons_stroke_failed_upload"> 
              <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span> 
             </span> 
             <span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) <= 99" class="mlcons_stroke_upload_doc"> 
              <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span> 
             </span> 
             <span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) > 99" class="mlcons_stroke_success_upload"> 
              <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span> 
             </span> 
            </div> 
            <div class="col-md-7 col-lg-7 px-0 margin-top-10" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0"> 
             <div class="align-left" *ngIf="uploadStatus == uploadStates.Ready">Upload a file to the project.</div> 
             <div *ngIf="uploadStatus == uploadStates.Ready" 
              class="second-message align-left">Drag and drop a<b> file </b>here or click Add File to browse.</div> 
            </div> 
            <div class="col-md-8 col-lg-8 px-0" *ngIf="(uploadStatus == uploadStates.Ready && uploader.queue.length > 0) || uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading || uploadStatus == uploadStates.Failed"> 
             <div [class.failed]="uploadStatus == uploadStates.Failed" 
              [class.upload]="uploadStatus == uploadStates.Uploading" 
              class="file-info"> 
              <file-icon [fileExtension]="fileExtension"></file-icon> <div> 
               {{fileInfo}} 
               <span *ngIf="uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading" class="mlcons_circled_check"><span class="path1"></span><span class="path2"></span></span> 
               <span *ngIf="(uploadStatus == uploadStates.Failed && !rename)" class="mlcons_circled_error"><span class="path1"></span><span class="path2"></span></span> 
              </div> 
             </div> 
            </div> 
            <div class="remove-file form-group col-md-4 col-lg-4 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length > 0"> 
             <div class="link-margin-right pull-right px-0" *ngIf="uploader.queue.length > 0"> 
              <div class="remove-file"> 
               <span class="mlcons_filled_close" (click)="$event.preventDefault(); remove()"></span> <a href="#" class="a-link" (click)="$event.preventDefault(); remove()">Remove</a> 
              </div> 
             </div> 
            </div> 
            <div class="form-group col-md-4 col-lg-4 px-0 remove-file" *ngIf="uploadStatus == uploadStates.Uploading"> 
             <div class="remove-file pull-right link-margin-right"> 
              <span class="mlcons_filled_close"></span> <a href="#" class="a-link" (click)="$event.preventDefault(); uploader.cancelAll()">Cancel</a> 
             </div> 
            </div> 

            <div class="col-md-3 col-lg-3 add-file-btn" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0"> 
             <input [hidden]="true" #file type="file" ng2FileSelect [uploader]="uploader" (change)="fileChangeEvent($event)" /> 
             <button (click)="$event.preventDefault(); file.click()" class="btn btn-primary"><i class="mlcons_filled_add"> </i> Add File</button> 
            </div> 
            <div class="form-group col-md-12 col-lg-12 px-0"> 
             <div class="padding-lr-15 file-progress"> 
              <div class="progress upload-progress" *ngIf="uploadStatus == uploadStates.Uploading"> 
               <div class="progress-bar" [class.failed]="uploadStatus == uploadStates.Failed" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div> 
              </div> 
             </div> 
             <div *ngIf="uploadStatus == uploadStates.Uploading && uploader.progress > 0" 
              [class.failed]="uploadStatus == uploadStates.Failed" 
              [class.upload]="uploadStatus == uploadStates.Uploading" 
              class="file-info-progress padding-lr-15"> 
              Uploading file <span>({{uploader.progress || 0}}%)</span> 
             </div> 
             <div *ngIf="fileExceeded" class="duplicate-file-name-error"> 
              <span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> {{fileName}} exceeds the maximum size limit of 20 MB. 
             </div> 
             <div *ngIf="errorOccured && uploadStatus == uploadStates.Failed" class="duplicate-file-name-error"> 
              <span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Upload was unsuccessful. Please try again. 
             </div> 
            </div> 
            <div>&nbsp;</div> 
           </div> 
          </div> 
         </div> 
        </div> 

       <div class="form-group col-md-12 col-lg-12 "> 
        <div class="col-md-4 px-0-left form-label"> 
         <label for="recipients" class="label-Names- label-inline">Recipients:</label> 
        </div> 
        <br /> 
        <div class="form-group col-md-12 col-lg-12 px-0"> 
         <textarea class="col-md-12 col-lg-12 px-2 textstyle" [readonly]="modalMode != modalModes.EditMode" maxlength="200" id="recipients" formControlName="recipients" (keydown)="recipientValue($event)" tabindex="0">{{originaleDataReport?.Recipient}} </textarea>      
        </div>    

        <div class="form-group col-md-12 px-0 px-25-pad-bottom"> 
         <span class="col-md-12 border-bottom-1"></span> 
         <hr /> 
        </div> 
        <div *ngIf="modalMode == modalModes.EditMode" class="form-group col-lg-12 px-0">      
         <button id="save-button" name="save-button" class="btn btn-primary" [disabled]="!isButtonEnable " type="submit" >Save Changes</button> 
         <button id="cancel-button" class="btn btn-default" type="submit" (keydown.Tab)="cancelButtonTab($event)" (click)="cancelClick($event)" tabindex="0">Cancel</button> 
        </div> 
        <div *ngIf="modalMode == modalModes.ViewMode" class="form-group col-lg-12 px-0 footer-action"> 
         <span class="mlcons_filled_edit"></span> <a id="edit-data" class="a-link" (keydown.Tab)="$event.preventDefault" (keydown.enter)="onEditDataClicked($event)" (click)="onEditDataClicked($event)" >Edit eData Reporting</a> 
        </div> 
       </div> 
      </div> 

     </form> 
    </div> 
</div> 

私は、誰かがこのエラーの原因を見つける私を助けることができる願っています。ありがとう

Answer 1

これはIEでこのようなエラーが発生することは完全に正常です。これは単にすべてのES6をサポートしていないだけでなく、もう一度IEに不足しているライブラリを追加する必要があります。
ゴーへのsrc/polyfills.tsと、次とその内容置き換える：

NPMインストール

1. NPMがインストール--save classlist.js：

   /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 
   import 'core-js/client/shim'; 
   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/weak-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`. 
   
   /** Evergreen browsers require these. **/ 
   import 'core-js/es6/reflect'; 
   import 'core-js/es7/reflect'; 
   
   
   /** 
   * Required to support Web Animations `@angular/animation`. 
   * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-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. 
   

   次のコマンドを実行します--save web-animations-js