ngIf и ngSwitch не заменят div в IE11

Question

Я пытаюсь открыть модальный режим, и пока выполняется мой запрос GET к API, я хочу, чтобы на модальном было показано колесо загрузки. Как только запрос завершается, я обновляю переменную show, и модальное содержимое заменяется формой с предварительно заполненными значениями из API. Кроме того, у меня есть условный раздел «ошибка», который добавляет div для ошибок в верхнюю часть формы, если API возвращает какие-либо ошибки. Я использую Angular Элементы, чтобы получить модальный HTML / функциональность, а элементы используются внутри решения ASP. NET MVC. Все это прекрасно работает в любом браузере, кроме IE11. html показано ниже:

<form id="addFormSolo" #f1="ngForm" (ngSubmit)="post(f1);" ngNativeValidate>
<ng-container [ngSwitch]="show">
<div *ngSwitchCase="false">
  <div class="modal-body" style="display: flex; justify-content: center;">
    <div class="loader" style="justify-content: center;"></div>
  </div>
</div>
<div *ngSwitchCase="true">
  <div class="modal-body">
    <div [ngSwitch]="hasErrors">
      <div *ngSwitchCase="true" class="alert alert-warning modalView validation-summary-errors" role="alert" data-valmsg-summary="true">
        <h5>Please correct the following errors</h5>
        <ul>
          <li *ngFor="let error of errors">{{error}}</li>
        </ul>
      </div>
    </div>
    <div class="editpage popup form-horizontal container-fluid">
      <div class="form-group row">
        <label class="col-sm-3 control-label required" for="description" style="text-align: right; padding-top: 7px;"> Name:</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="nameAddSolo" name="description" maxlength="70" [ngModel]="model.description">
        </div>
      </div>
    </div>
    <div class="editpage popup form-horizontal container-fluid">
      <div class="form-group row" style="align-items:center;">
        <label class="col-sm-3 control-label required" for="code" style="text-align: right; padding-top: 7px;"> Code:</label>
        <div class="col-sm-4 editPageValue">
          <input type="text" class="form-control codeInput" id="codeAddSolo" name="code" maxlength="20" [ngModel]="model.code">
        </div>
        <div class="col-sm-4">
          <div class="checkbox" style="padding-top:0px;">
            <label>
              <input type="checkbox" class="activeInput" id="activeAddSolo" name="active" [ngModel]="model.isActive">
              <span class="text">
                Active
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="btn-group">
      <input type="submit" class="btn btn-primary" value="Save & Close" style="margin-right: 5px">
    </div>
    <button data-dismiss="modal" class="btn btn-outline-secondary">Close</button>
  </div>
</div>

Действительно, есть закрывающая форма и тег ng-container, но у меня проблемы с форматированием

Я пытался использовать полифилы, пытался установить target = ES5, но это дает мне «TypeError: Не удалось создать« HTMLElement »: пожалуйста, используйте оператор« new », этот конструктор объекта DOM нельзя вызвать как функцию». когда я пробую chrome / другие браузеры, но все равно не работает ngIf / ngSwitch. Я даже пытался использовать Babel для транспорта. Что-то мне не хватает, или этот условный рендеринг просто не работает с IE11, несмотря ни на что?