1

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>
shreya jain
  • 11
  • 3
  • Is there an error or something in the developers tools? – Lotte Lemmens Jul 23 '20 at 13:05
  • Can you please share any errors that you are getting in console or anywhere? – Pritesh Jul 23 '20 at 13:09
  • @shreyajain - FYI, you should reply the comment using @ name of person so that they will get notification. – R15 Jul 23 '20 at 13:40
  • Thanks @ArvindChourasiya Noob to this society :) – shreya jain Jul 23 '20 at 13:49
  • @Pritesh There are no errors except this warning. `It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. For more information on this, see our API docs here: angular.io/api/forms/FormControlName#use-with-ngmodel ` – shreya jain Jul 23 '20 at 13:52
  • @LotteLemmens tagging for visibility – shreya jain Jul 23 '20 at 13:52
  • @shreyajain That warning is for using ngModel and formControlName on the same item: https://stackoverflow.com/questions/49918503/angular-6-warning-for-using-formcontrolname-and-ngmodel – Lotte Lemmens Jul 24 '20 at 06:54
  • @LotteLemmens I have tried this. Tried removing all ngModel but Mat fields don't work. I have other autocomplete fields which are using ngSelect lib and they are all working fine. – shreya jain Jul 24 '20 at 07:08

1 Answers1

0

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.

shreya jain
  • 11
  • 3