Angular 6 production build error with buildOptimizer and aot

Question

My Angular 6 project will not build with the command;

ng build --prod --configuration=production  --base-href=/quickorder/

and gives the errors;

ERROR in src\app\order-input\order-input.component.html(43,17): : Property 'number' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(58,57): : Property 'autoCorrect' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(58,19): : Property 'value' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(72,19): : Property 'value' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(82,19): : Property 'value' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(112,31): : Property 'checked' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(112,31): : Property 'checked' does not exist on type 'OrderInputComponent'.

These seem to be coming from my kendo-ui components.

My angular.json;

      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
      }
    },

However, if I set aot and buildOptimizer to false, it works. Is this a problem with Angular or am I doing something wrong?

Some of the html;

        <label class="k-form-field required" for="product" style="width: 40%; display: inline-block">
            <span>Select Product</span>
            <kendo-autocomplete class="form-control" id="product" name="product" required validationMessage="Select Product"
            [popupSettings]="{width: 400}"
            style="width: 100%;" 
            [data]="listItems"
**Line 43-->[value]=number**
            [valueField]="'PackDescription'"
            [filterable]="true"
            [placeholder]="'e.g. Wheat or 25KG (3 character minimum)'"
            (valueChange)="valueChange($event)"
            (filterChange)="filterChange($event)"
            [(ngModel)]="product" 
            [ngModelOptions]="{standalone: true}">
          </kendo-autocomplete><span class="k-invalid-msg" data-for="product"></span>
        </label>
        &nbsp;
        <label class="k-form-field required" for="quantities" style="display: inline-block">
            <span>Quantity</span>
            <!-- <input style="width: 150px" type="number" class="form-control" [(ngModel)]="quantity" name="quantities"  id="quantities" required validationMessage="Select Quantity"> -->
            <kendo-numerictextbox
              [value]="value" [min]="1" [max]="200" [autoCorrect]="autoCorrect"
              [(ngModel)]="quantity"
              [ngModelOptions]="{standalone: true}">
            </kendo-numerictextbox>
            <span class="k-invalid-msg" data-for="quantities"></span>             
        </label>

Thr .ts;

export class OrderInputComponent implements OnInit {

  MINFILTERLENGTH: number = 3;

  ref: string;
  name: string;
  repRef: string;
  allData: any[];
  xrefAddress = [];
  addressListItems: Array<Object> = [];
  listItems: Array<Object> = [];
  selectedItem: Object;
  orderLines: Array<Object> = [];
  total: number;
  addressNumber: string;
  productNumber: string;
  defaultAddressItem:  { name: string, number: number } = {name: "Select Address...", number: null};
  newOrderLines: Array<Object> = [];
  tradingpartner: string;
  product: string;
  productRef: string;
  productDesc: string;
  quantity: number;
  price: number;
  selectedValue: number;

  orderRef: string = null;
  orderError: string = null;

  fd: Date;
  td: Date;
  fromDate: string;
  toDate: string;
  collection: boolean;
  debug: boolean = false;
  comments: string;
  public events: string[] = [];

  constructor( private user: UserService,
               private router:Router,
               private orders: OrdersService,
               private route: ActivatedRoute,
               private productXref: ProductXrefService,
               private addressXref: AddressXrefService,
               private intl: IntlService,
               private createOrderService: CreateOrderService,
               private globalsService: GlobalsService,
               private location: Location,
               private ngxXml2jsonService: NgxXml2jsonService,
               private localStorageService: LocalStorageService) {

Thanks in advance for any help,

Mark.

P.S. I should add that ng serve and ng build work fine.

Answer 1

I don't know why, but sometimes with the kendo controls, adding or removing the [] will get you through this error:

autoCorrect="autoCorrect" instead of [autoCorrect]="autoCorrect"

Hope this helps!