Covalent: TdAutoCompleteComponent incompatibility with Angular Material Beta 2

Created on 17 Feb 2017  Â·  2Comments  Â·  Source: Teradata/covalent

Angular has updated Material lib to 2.0.0-beta.2. Now it includes its own autocomplete control, This cause Covalent exception during compilation.
To repro:
just update your Material to beta.2 and run the project. I got this result on completely empty project I generated using Angular CLI. Rolling back to 2.0.0-beta.1 solves the issue.
Angular ver: 2.4.7
Angular CLI ver: 1.0.0-beta.32.3
Angular compiler CLI ver: 2.4.7
Material ver: 2.0.0-beta.2
Covalent Core ver: 1.0.0-beta.1-1
Here is console output:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
  <md-input flex="100" 
            [(ngModel)]="value"
            [ERROR ->][placeholder]="placeholder"
            [autofocus]="autoFocus"
            [list]="listName"
"): TdAutoCompleteComponent@3:12
Can't bind to 'autofocus' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'autofocus' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [(ngModel)]="value"
            [placeholder]="placeholder"
            [ERROR ->][autofocus]="autoFocus"
            [list]="listName"
            [max]="max"
"): TdAutoCompleteComponent@4:12
Can't bind to 'list' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'list' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [placeholder]="placeholder"
            [autofocus]="autoFocus"
            [ERROR ->][list]="listName"
            [max]="max"
            [maxlength]="maxLength"
"): TdAutoCompleteComponent@5:12
Can't bind to 'max' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'max' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [autofocus]="autoFocus"
            [list]="listName"
            [ERROR ->][max]="max"
            [maxlength]="maxLength"
            [min]="min"
"): TdAutoCompleteComponent@6:12
Can't bind to 'min' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'min' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [max]="max"
            [maxlength]="maxLength"
            [ERROR ->][min]="min"
            [minlength]="minLength"
            [readonly]="readOnly"
"): TdAutoCompleteComponent@8:12
Can't bind to 'readOnly' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'readOnly' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [min]="min"
            [minlength]="minLength"
            [ERROR ->][readonly]="readOnly"
            [disabled]="disabled"
            [required]="required"
"): TdAutoCompleteComponent@10:12
'md-input' is not a known element:
1. If 'md-input' is an Angular component, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<div flex>
  [ERROR ->]<md-input flex="100" 
            [(ngModel)]="value"
            [placeholder]="placeholder"
"): TdAutoCompleteComponent@1:2 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-inp…, _nativeError: ZoneAwareError, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'place…ttp://localhost:4200/polyfills.bundle.js:3125:35)", __zone_symbol__message: "Template parse errors:↵Can't bind to 'placeholder'…er]="placeholder"↵"): TdAutoCompleteComponent@1:2"} Error: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
  <md-input flex="100" 
            [(ngModel)]="value"
            [ERROR ->][placeholder]="placeholder"
            [autofocus]="autoFocus"
            [list]="listName"
"): TdAutoCompleteComponent@3:12
Can't bind to 'autofocus' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'autofocus' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [(ngModel)]="value"
            [placeholder]="placeholder"
            [ERROR ->][autofocus]="autoFocus"
            [list]="listName"
            [max]="max"
"): TdAutoCompleteComponent@4:12
Can't bind to 'list' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'list' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [placeholder]="placeholder"
            [autofocus]="autoFocus"
            [ERROR ->][list]="listName"
            [max]="max"
            [maxlength]="maxLength"
"): TdAutoCompleteComponent@5:12
Can't bind to 'max' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'max' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [autofocus]="autoFocus"
            [list]="listName"
            [ERROR ->][max]="max"
            [maxlength]="maxLength"
            [min]="min"
"): TdAutoCompleteComponent@6:12
Can't bind to 'min' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'min' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [max]="max"
            [maxlength]="maxLength"
            [ERROR ->][min]="min"
            [minlength]="minLength"
            [readonly]="readOnly"
"): TdAutoCompleteComponent@8:12
Can't bind to 'readOnly' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'readOnly' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
            [min]="min"
            [minlength]="minLength"
            [ERROR ->][readonly]="readOnly"
            [disabled]="disabled"
            [required]="required"
"): TdAutoCompleteComponent@10:12
'md-input' is not a known element:
1. If 'md-input' is an Angular component, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<div flex>
  [ERROR ->]<md-input flex="100" 
            [(ngModel)]="value"
            [placeholder]="placeholder"
"): TdAutoCompleteComponent@1:2
    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3554:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:87366:16)
    at new SyntaxError (http://localhost:4200/vendor.bundle.js:6598:16)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:21040:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:59251:68)
    at http://localhost:4200/vendor.bundle.js:59134:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:59134:19)
    at createResult (http://localhost:4200/vendor.bundle.js:59016:19)
    at ZoneDelegate.webpackJsonp.925.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2926:26)
    at Zone.webpackJsonp.925.Zone.run (http://localhost:4200/polyfills.bundle.js:2722:43)
    at http://localhost:4200/polyfills.bundle.js:3275:57
    at ZoneDelegate.webpackJsonp.925.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2959:31)
    at Zone.webpackJsonp.925.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2762:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3125:35)
consoleError @ zone.js:516
_loop_1 @ zone.js:545
drainMicroTaskQueue @ zone.js:549

Most helpful comment

Yes, breaking changes from material also affect covalent, so we are fixing those compatibility issues for our beta.2 release coming out next week.

All 2 comments

Material2 implemented some breaking changes and Covalent is not supporting the latest version of Material2 yet.

See https://github.com/Teradata/covalent/pull/305

Yes, breaking changes from material also affect covalent, so we are fixing those compatibility issues for our beta.2 release coming out next week.

Was this page helpful?
0 / 5 - 0 ratings