Question

我有以下问题。我正在使用Angular v7建立一个小型网站。问题是我将一个席子表包装到一个单独的组件中，该组件将在整个应用程序中重复使用，但是该组件不仅在IE11上呈现。我取消了IE11所需的polyfill的注释，但这无济于事。

有趣的事实是，所有html元素均已加载到DOM中，但它们不可见。 控制台中没有错误或警告。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

polyfills.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js';
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';

/**
 * If the application will be indexed by Google Search, the following is required.
 * Googlebot uses a renderer based on Chrome 41.
 * https://developers.google.com/search/docs/guides/rendering
 **/
// import 'core-js/es6/array';

/** 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 for the Reflect API. */
import 'core-js/es6/reflect';

package.json

"dependencies": {
    "@angular/animations": "^7.1.2",
    "@angular/cdk": "^7.1.1",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.1",
    "core-js-bundle": "^3.0.0-beta.7",
    "material-design-icons": "^3.0.1",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },

invoices.component.html

<div class="container">
  <test-data-table [ngClass]="{ 'no-selection': (!selection || selection.length === 0) }"
                   [rawDataSource]="invoices"
                   [displayedColumns]="displayedColumns"
                   (onSelectionChange)="onSelection($event)">
  </test-data-table>

  <div class="export-container" fxLayout="row nowrap" fxLayoutAlign="end center" *ngIf="displayExport">
    <button mat-raised-button (click)="export()">Export</button>
  </div>
</div>

数据表.component

<div class="data-wrapper">
  <mat-form-field class="full-width">
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>

  <mat-table #table [dataSource]="dataSource" class="full-width">
    <ng-container *ngFor="let col of displayedColumns" [cdkColumnDef]="col">
      <mat-header-cell *cdkHeaderCellDef>
        <span *ngIf="col !== 'select'">{{ normalizeColumnName(col) }}</span>
        <mat-checkbox *ngIf="col === 'select'"
                      (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </mat-header-cell>
      <mat-cell *cdkCellDef="let row">
        <span *ngIf="col !== 'select' &&
                     col !== 'pdfDocument' &&
                     col !== 'leaseDocuments' &&
                     col !== 'technicalSpecifications' &&
                     col !== 'template'">{{ row[col] }}</span>
        <mat-checkbox *ngIf="col === 'select'"
                      (click)="selectionChange();$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
        <div *ngIf="col === 'template' ||
                    col === 'pdfDocument' ||
                    col === 'leaseDocuments' ||
                    col === 'technicalSpecifications'">
          <a href="{{ '/api/documents/' + row[col] }}" target="_blank" *ngIf="row[col] !== null && row[col] !== ''">
            <img src="/assets/images/icons/{{ col }}.png" alt="pdf_download"/>
          </a>
        </div>
      </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

IE 11屏幕截图

您有什么建议吗？感谢您的帮助，因为我用完了所有选项（如果需要其他信息，请告诉我）。

Answer 1

取消注释polyfills.ts中的所有Import
安装这两个软件包

npm install-保存classlist.js

npm install-保存web-animations-js

编译并在IE上运行

IE 11中无法渲染角度组件

1 个答案: