Verschiedene Div in der Produktion generiert

Question

Wir haben eine Angular 4 App mit Angular Material, die unterschiedliche HTML generiert haben, sobald wir die Website im Produktionsmodus ausführen. Wir verwenden angular/flex-layout für das Layout und webpack zum Bündeln usw. Als Beispiel für den Unterschied lokal und prod:

Ort:

<div class="mat-input-table"> 
<!----> 
<div class="mat-input-infix"> 
    <button type="button" class="mat-datepicker-toggle" aria-label="Open calendar"></button> 
      <input formcontrolname="arrivalDate" mdinput="" placeholder="Arrival" aria-expanded="false" aria-haspopup="true" aria-owns="md-datepicker-0" class="mat-input-element ng-pristine ng-valid ng-touched" id="md-input-1"> 
      <span class="mat-input-placeholder-wrapper"> <!----><label class="mat-input-placeholder mat-float" for="md-input-1"> Arrival <!----> </label> </span> </div> 
<!----> 
</div> 

Prod:

<div class="mat-input-flex"> 
    <!----> 
    <div class="mat-input-infix"> 
      <button class="mat-datepicker-toggle" type="button" aria-label="Open calendar"></button> 
        <input class="mat-input-element ng-pristine ng-valid ng-touched" formcontrolname="arrivalDate" mdinput="" placeholder="Arrival" aria-expanded="false" aria-haspopup="true" aria-owns="md-datepicker-0" id="md-input-1" aria-invalid="false"> 
        <span class="mat-input-placeholder-wrapper"><!----><label class="mat-input-placeholder ng-tns-c14-1 mat-float" for="md-input-1">Arrival 
<!----></label></span></div> 
    <!----></div> 

Excuse die Formatierung, aber Wie Sie sehen können, hat das oberste Div in diesen Blöcken unterschiedliche Klassen in den verschiedenen Umgebungen. Diese Klasse ist nicht etwas, das wir in unserem HTML haben, sondern wird bei der Ausgabe des Projekts erzeugt. Irgendwelche Hinweise, Ideen, Gedanken willkommen hier, wir sind mit einem solchen Problem wirklich nicht vertraut.

EDIT: Die HTML, welche diese Ausgänge erzeugt:

<!-- Arrival Date --> 
<div fxFlex="100" fxFlex.gt-sm="20" class="form-group datepicker-container gutter-right-gt-sm" [class.has-error]="formErrors.arrivalDate"> 
     <div fxLayout="row" fxLayoutAlign="center center" class="input-icon-container datepicker"> 
      <md-input-container> 
       <button [mdDatepickerToggle]="arrivalDatepicker"></button> 
       <input mdInput 
         [mdDatepicker]="arrivalDatepicker" 
         [mdDatepickerFilter]="minArrivalFilter" 
         formControlName="arrivalDate" 
         placeholder="Arrival"/> 
      </md-input-container> 
      <md-datepicker #arrivalDatepicker flex='auto' [touchUi]="false"></md-datepicker> 
     </div> 
     <span *ngIf="formErrors.arrivalDate">{{formErrors.arrivalDate}}</span></div> 

Answer 1

flex-Layout ist ein reaktions temaplate hat whish verschiedene Arten für verschiedene Ansichtsfenstern und Geräte. Das bedeutet, wenn Sie die Einstellungen geringfügig ändern, z. B. den Kompatibilitätsmodus oder verschiedene Browser, können sich die Klassen ändern. Davon abgesehen sollte das Verhalten der Benutzeroberfläche das gleiche sein.