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
Material2 implemented some breaking changes and Covalent is not supporting the latest version of Material2 yet.
Yes, breaking changes from material also affect covalent, so we are fixing those compatibility issues for our beta.2 release coming out next week.
Most helpful comment
Yes, breaking changes from material also affect
covalent, so we are fixing those compatibility issues for ourbeta.2release coming out next week.