生産中に異なるdivが生成される

Question

角度モードの4つのアングル材を使用し、生産モードでウェブサイトを実行すると異なるHTMLを生成するように見えます。

ローカル：：私たちは、ローカルの違いの例としてなど束ねるとPRODのレイアウトのためのangular/flex-layout、およびWebPACKのを使用している

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

言い訳の書式が、あなたが見ることができるように、これらのブロックのトップレベルdivには、異なる環境で異なるクラスが割り当てられています。このクラスは私たちがHTMLで持っているものではなく、プロジェクトの出力時に生成されます。どんな手がかり、アイデア、考えがここで歓迎されているか、私たちは本当にこのような問題に慣れていません。

EDIT： これらの出力を生成しているHTML：

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

フレックスレイアウトが応答temaplateで、シューッという音は、異なるビューポートやデバイスごとに異なるスタイルを持っています。つまり、互換モードやブラウザの違いなど、設定が少し変わった場合、クラスが変更される可能性があります。つまり、UIの動作は同じにする必要があります。