[SOLVED] Material 8 libraries not working with AOT mode

Material 8 libraries not working with AOT mode

I am using MatSelect, MatChips and many other Mat libraries but none seem to work with AOT mode enabled. Dropdowns, MatChip inputs are not responding after clicks. They are working without AOT. Below is my package.json file and code snippet for MatSelect. I have imported MatSelectModule and all other required Material modules. Not able to get what am I missing here. Please help.

P.S. I tried removing [(ngModel)] and setting it in the ts file but it still doesn't work.

package.json

"dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.2",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/material": "8.2.2",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@azure/msal-angular": "^1.0.0",
    "@ng-idle/core": "^9.0.0-beta.1",
    "@ng-select/ng-select": "^0.23.0",
    "@types/c3": "^0.6.2",
    "angular2-text-mask": "^9.0.0",
    "angular2-uuid": "^1.1.1",
    "c3": "^0.6.8",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "exceljs": "4.0.0",
    "file-saver": "^2.0.2",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^2.3.5",
    "msal": "^1.3.2",
    "ng-pick-datetime": "^5.2.6",
    "ng2-currency-mask": "^5.3.1",
    "ngx-bootstrap": "^5.6.1",
    "ngx-chips": "^1.9.2",
    "ngx-infinite-scroll": "^0.8.4",
    "ngx-masonry": "^1.1.2",
    "ngx-mat-select-search": "^1.8.0",
    "ngx-print": "^1.1.4",
    "ngx-toastr": "^10.0.4",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.6.0",
    "tslib": "^1.10.0",
    "xlsx": "^0.14.3",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.28",
    "@angular/cli": "^8.3.28",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~14.0.14",
    "codelyzer": "^5.0.1",
    "gzipper": "^4.0.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "3.4.5"
  }

<div class="formItem">
    <mat-form-field [ngClass]="isResetClicked ? 'mat-form-field-reset' : ''">
        <mat-select [(ngModel)]="objAddTodo.timezoneId" placeholder="Time Zone *" formControlName="timeZone" id="timeZone"
                    disableOptionCentering panelClass="disableOptionCentering">
            <mat-option *ngFor="let timeZone of timeZoneList" [value]="timeZone.timezoneId">
                {{ timeZone.timezoneName }}
            </mat-option>
        </mat-select>
        <mat-error *ngIf="(addTodoForm.get('timeZone').hasError('required') && isSubmitClicked)">
            Time
            Zone
            is required
        </mat-error>
    </mat-form-field>
</div>

Solution

I was finally able to solve this. "ng-pick-datetime" was the culprit (actually I missed updating it 😛) and the older version was causing all Material libraries to misbehave in AOT mode.