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

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>]

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 18 (2 by maintainers)

Most upvoted comments

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 ],

+10

bijukkutty on Jul 19, 2017

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

tariknz on Dec 12, 2016

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

Nodarii on Jul 11, 2017

MaterialModule seems to be deprecated.

nucatus on Jul 27, 2017

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


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:

@NgModule({
...
  imports: [
...
    MaterialModule,
...
]
})

maiasmith on Sep 9, 2017