Components: Can't bind to 'matAutocomplete' since it isn't a known property of 'input'.

[anudeepkowluru]

Bug:

Uncaught Error: Template parse errors:
Can't bind to 'matAutocomplete' since it isn't a known property of 'input'.

What are the steps to reproduce?

Created a new Angular project with following dependencies:
"dependencies": {
"@angular/animations": "^5.0.2",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.1",
"@angular/compiler": "^5.0.1",
"@angular/compiler-cli": "5.0.1",
"@angular/core": "^5.0.1",
"@angular/forms": "^5.0.1",
"@angular/http": "^5.0.1",
"@angular/material": "^5.0.0-rc0",
"@angular/platform-browser": "^5.0.1",
"@angular/platform-browser-dynamic": "^5.0.1",
"@angular/router": "^5.0.1",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.5.3",
"@angular/compiler-cli": "5.0.1",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "^2.6.1"
}

Full error msg:
compiler.js:466 Uncaught Error: Template parse errors:
Can't bind to 'matAutocomplete' since it isn't a known property of 'input'. ("t-form-field class="example-full-width">
][matAutocomplete]="auto" [formControl]="stateCtrl">

"): ng:///AppModule/AppComponent.html@2:59
Can't bind to 'formControl' since it isn't a known property of 'input'. ("le-full-width">
][formControl]="stateCtrl">

@2:84
There is no directive with "exportAs" set to "matAutocomplete" ("State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
]#auto="matAutocomplete">
html@3:22
Can't bind to 'value' since it isn't a known property of 'mat-option'.

1. If 'mat-option' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("utocomplete #auto="matAutocomplete">
   ][value]="state.name">
   html@4:63
   'mat-option' is not a known element:
4. If 'mat-option' is an Angular component, then verify that it is part of this module.
5. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("utocomplete]="auto" [formControl]="stateCtrl">
   
   [ERROR ->]
   html@4:6
   'mat-autocomplete' is not a known element:
6. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
7. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("nput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
   [ERROR ->]
   html@3:4
   'mat-form-field' is not a known element:
8. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
9. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   [ERROR ->]
   html@1:2
   Can't bind to 'checked' since it isn't a known property of 'mat-slide-toggle'.
10. If 'mat-slide-toggle' is an Angular component and it has 'checked' input, then verify that it is part of this module.
11. If 'mat-slide-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
12. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

[ERROR ->][checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disa"): ng:///AppModule/AppComponent.html@15:4
'mat-slide-toggle' is not a known element:

1. If 'mat-slide-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-slide-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   

[ERROR ->] [checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.ena"): ng:///AppModule/AppComponent.html@14:2
No provider for NgControl ("

[ERROR ->]html@2:4
at syntaxError (compiler.js:466)
at TemplateParser.parse (compiler.js:24329)
at JitCompiler._parseTemplate (compiler.js:33716)
at JitCompiler._compileTemplate (compiler.js:33691)
at eval (compiler.js:33593)
at Set.forEach ()
at JitCompiler._compileComponents (compiler.js:33593)
at eval (compiler.js:33463)
at Object.then (compiler.js:455)
at JitCompiler._compileModuleAndComponents (compiler.js:33462)

[jelbourn]

Sounds like you're missing MatAutocompleteModule

Closing this issue as it does not follow the issue template. Please file a new issue that follows the template, which gives the team the information needed to investigate.

[bhupinderkumarbl]

@jelbourn You are right this is issue with the MatAutocompleteModule

[faridabbas-dl]

Ahhhh ...Thanks @jelbourn... you are exactly right................. i was missing the MatAutocompleteModule.....

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}