Components: 'md-option' is not a known element

[stefan-niedermann]

Bug, feature request, or proposal:

Bug (or wrong usage?)

What is the expected behavior?

Options should be displayed within the select element.

What is the current behavior?

The whole application does not render

What are the steps to reproduce?

Tried to reproduce it with a plunkr, was happy when i edited your template and saw i got the same error. after opening and verifying it in a new private window the error disappeared.
So i assumed it could be a client cache problem, but after retrying with different browsers i still get not managed this problem.

Which versions of Angular, Material, OS, browsers are affected?

I am using Material 2.0.0-alpha.11-3 with Angular 2.2.4

Is there anything else we should know?

I am using Angular-CLI

Unhandled Promise rejection: Template parse errors:
'md-option' is not a known element:
1. If 'md-option' is an Angular component, then verify that it is part of this module.
2. If 'md-option' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("h2>User hinzufügen</h2>
                    <md-select [(ngModel)]="aUserId" name="user" placeholder="User">
                        [ERROR ->]<md-option *ngFor="let item of aUser" value="5">{{item.firstname}} {{item.lastname}}</md-option>
                    <"): MyComponent@17:6
TemplateParser</TemplateParser.prototype.parse@http://localhost:4200/vendor.bundle.js:18368:19 [<root>]
RuntimeCompiler</RuntimeCompiler.prototype._compileTemplate@http://localhost:4200/vendor.bundle.js:40389:30 [<root>]
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents/<@http://localhost:4200/vendor.bundle.js:40309:56 [<root>]
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents@http://localhost:4200/vendor.bundle.js:40309:9 [<root>]
RuntimeCompiler</RuntimeCompiler.prototype._compileModuleAndComponents/createResult@http://localhost:4200/vendor.bundle.js:40205:13 [<root>]
Zone$1</Zone</Zone.prototype.run@http://localhost:4200/vendor.bundle.js:95823:24 [<root> => <root>]
scheduleResolveOrReject/<@http://localhost:4200/vendor.bundle.js:96219:52 [<root>]
Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/vendor.bundle.js:95861:28 [<root> => <root>]
drainMicroTaskQueue@http://localhost:4200/vendor.bundle.js:96115:25 [<root>]

[MatthieuBarthel]

Hi, I had a similar issue, I destroyed the node_modules folder and reinstalled using npm install, the issue was gone.

[tariknz]

I had to import the MdSelectModule separate to the MaterialModule to get it to work.

[kara]

@stefan-niedermann @tariknz Can you try destroying the node_modules folder and reinstalling, as Matthieu did? You shouldn't have to import the select module separately, given that the select module is part of the MaterialModule. It sounds like something in the build hasn't updated.

[stefan-niedermann]

Hi folks, thanks for the tip. I will try this and then post the result here :)

[kara]

Since this seems like a node_modules issue, I'm going to close this. Feel free to open a new issue if a fresh install doesn't help.

[karolmie1]

For the people reading this in the future: for me update from 2.0.0-alpha.11 to 2.0.0-alpha.11-3 solved the issue.

[tariknz]

That's fine thanks @kara haven't been to replicate it since.

[lekoder]

@kara unfortunately, I'm hitting the very same problem right now. I just initialized a new project with angular-cli and added @angular/material as per getting started. Code itself works fine, but ng test fails with 'md-tab-group' is not a known element.

Here you will find a repo that replicates problem, including Travis build that shows it's failing.

[lekoder]

Disregard previous comment, I had mis-configured TestBed.

[niranjanwnmt]

Hi,
I am facing similar issue with
angular-material 2.0.0-beta.2, Angular 2.4.10

already tried removing every thing node_modules and rebuilding using npm install.

`
Unhandled Promise rejection: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'md-option'.

1. If 'md-option' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'md-option' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("ct name="processVar" placeholder="" ngDefaultControl>
   ][value]="vars.variable_id">
   {{ vars.variable_name }}
   
   "): VariableList@1:46
   'md-option' is not a known element:
3. If 'md-option' is an Angular component, then verify that it is part of this module.
4. If 'md-option' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   [ERROR ->]
   {{ vars.variable_na"): VariableList@1:4
   'md-select' is not a known element:
5. If 'md-select' is an Angular component, then verify that it is part of this module.
6. If 'md-select' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]
   VariableList@0:0 ; Zone: ;
   `

[dahaupt]

@niranjanwnmt Can you create a plunkr to reproduce your issue?

[arlamaeen]

@niranjanwnmt Did you manage to fix the issue? I'm also having an issue but I read somewhere that you should remove the square bracket. But when I removed it my error became "md-option is not a known element".

I'm using angular-seed as a setup

[Nodarii]

@niranjanwnmt, @arlamaeen
probably you just forgot to import MdSelectModule and include to your module imports array

[bijukkutty]

Started working after adding import { MaterialModule } from '@angular/material';
import { MdSelectModule } from '@angular/material';

and importing it to array like below on the same module as where the form is. If added to app.module.ts it was still giving error

imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule,
MdSelectModule
],

[nucatus]

MaterialModule seems to be deprecated.

[maiasmith]

I got it to work, and my full material.module.ts file now looks like this

```import { NgModule } from '@angular/core';

import {
MdButtonModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdCardModule,
MdDialogModule,
MdFormFieldModule,
MdSelectModule
} from '@angular/material';

@NgModule({
imports: [
MdButtonModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdCardModule,
MdDialogModule,
MdFormFieldModule,
MdSelectModule
],
exports: [
MdButtonModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdCardModule,
MdDialogModule,
MdFormFieldModule,
MdSelectModule
]
})
export class MaterialModule {}

Then I import it into my app.module.ts file, like this:

```import { MaterialModule } from './material/material.module';
@NgModule({
...
  imports: [
...
    MaterialModule,
...
]
})

[avikenjale]

Another way is to use class attribute of button element. <button class='md-button md-raised'> Foo </button>. Ultimately md-button or md-raised are css classes.

[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.

<sub>_This action has been performed automatically by a bot._</sub>