Search code examples
angularangular8angular-cli-v8angular-material-8

Angular Material Label Won't Float with AOT Build

I've been searching to see if anyone else has come across this error for a while now, but to no avail. I recently upgraded my website to Angular 8 and started using the Angular CLI instead of webpack. I finally ran a production build with the --aot flag and find some odd behavior with Angular Material Labels not floating like they always have. I don't have any console errors in my browser either.

My labels just stay in the way instead of floating up as they do with non AOT builds `

<mat-form-field appearance="outline" floatLabel="always">
    <mat-label>{{ label || 'User' }}</mat-label>
    <input matInput spellcheck="false" [formControl]="userInputControl">
    <mat-icon matPrefix style="cursor: pointer; margin-right: 10px;">search</mat-icon>
    <mat-icon matSuffix style="cursor: pointer;" (click)="updateUserListSettings()">person</mat-icon>
    <mat-hint>Search using User ID, Name, or Email Address</mat-hint>
</mat-form-field>
<mat-form-field class="te-form-225" appearance="outline">
    <mat-label>Role Class</mat-label>
    <mat-select [(ngModel)]="filterRoleClass" (selectionChange)="filterRoles()">
        <mat-option *ngFor="let rc of roleClasses" [value]="rc">{{ rc | titleCase }}</mat-option>
    </mat-select>
</mat-form-field>

Angular CLI: 8.3.20
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.10
@angular-devkit/build-angular     0.803.10
@angular-devkit/build-optimizer   0.803.10
@angular-devkit/build-webpack     0.803.10
@angular-devkit/core              8.3.10
@angular-devkit/schematics        8.3.20
@angular/cdk                      8.2.3
@angular/cli                      8.3.20
@angular/material                 8.2.3
@ngtools/webpack                  8.3.10
@schematics/angular               8.3.20
@schematics/update                0.803.20
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.41.1
Solution

  • I ended up solving my own problem by changing the angular.json file setting of build -> options -> extractCss to false.

    After seeing this solve the issue, I did a little more research on that specific flag and see that it has been an issue for quite a while with the Angular CLI, documented here -> https://github.com/angular/angular-cli/issues/8577