IE error with Angular 2

2019-07-12 03:17发布

站内问答 / JavaScript
764 1 6

I need help on this IE error which I think relates on binding issue on my HTML page. I'm using IE 11 and Angular 2. It has no error on Chrome and Firefox but I got an error on this with IE 11 only. I can't trace where the exact error is located on my page but I know it's on my HTML page somewhere because of this part of the error.

at View_EdataReportingComponent0.prototype.detectChangesInternal (Function code:2933:5)

Here's the screenshot from the console in IE which shows the error. enter image description here

And here's my HTML page...

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

I hope somebody could help me find the cause of this error. Thanks

1条回答
相关推荐>>
2楼-- · 2019-07-12 04:09

It's perfectly normal that you get such errors in IE. It simply doesn't support all ES6 and then again you need to add some missing libraries in IE.
Go to src/polyfills.ts and replace its content with the following:

/** 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.

Run the following commands:

  1. npm install --save classlist.js
  2. npm install --save web-animations-js
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)