Components: md-list-item not a known element

[DerekTBrown]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Should render md-list and md-list-item

What is the current behavior?

Receives an error:

Uncaught Error: Template parse errors:
'md-list-item' is not a known element:
1. If 'md-list-item' is an Angular component, then verify that it is part of this module.
2. If 'md-list-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div class="tuxlab-login"> <div class=""> <md-list> [ERROR ->]<md-list-item> </md-list-item> </md-list> </div> </div> "): ng:///AppRoutingModule/Login.html@0:52
'md-list' is not a known element:
1. If 'md-list' is an Angular component, then verify that it is part of this module.
2. If 'md-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div class="tuxlab-login"> <div class=""> [ERROR ->]<md-list> <md-list-item> </md-list-item> </md-list> </div> </div> "): ng:///AppRoutingModule/Login.html@0:42

[DerekTBrown]

Here is my app.module.ts:

// Angular Core
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

// Angular Material
import { MaterialModule, MdCoreModule, MdToolbarModule, MdSidenavModule, MdButtonModule, MdChipsModule, MdListModule, MdInputModule } from '@angular/material';

// App Component
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app.routes";

@NgModule({
  // Components, Pipes, Directive
  declarations: [
    AppComponent
  ],
  // Entry Components
  entryComponents: [
    AppComponent
  ],
  // Providers
  providers: [
  ],
  // Modules
  imports: [
    BrowserModule,
    AppRoutingModule,
    MaterialModule,
    MdCoreModule,
    MdListModule,
    MdInputModule,
    MdToolbarModule,
    MdSidenavModule,
    MdButtonModule,
    MdChipsModule
  ],
  // Main Component
  bootstrap: [ AppComponent ]
})
export class AppModule {
  constructor() {

  }
}

[m98]

Please try to export your angular/material module, also reading the official guide will help you _(see step 3)_

[julianobrasil]

@DerekTBrown, where are you using the md-list? In a component inside AppModule (the AppComponent)? Or in any other module? You must import material modules in the module you want to use them.

Also, try to provide a plunker.

[jelbourn]

You need to import MdListModule in whatever component uses <md-list-item>. Somewhere in your application it is missing.

[dungahk]

@jelbourn No, one doesn't need to import the module in every component that needs a material component, all he needs to do is import the module in his own module, just like he did.

It's probably because you are importing 'MaterialModule, MdCoreModule', try to delete these two, they are not needed, just import the modules you need.

Or you can just import MaterialModule and delete the rest, MdListModule, MdInputModule, etc.

// Angular Core
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

// Angular Material
import { MdToolbarModule, MdSidenavModule, MdButtonModule, MdChipsModule, MdListModule, MdInputModule } from '@angular/material';

// App Component
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app.routes";

@NgModule({
  // Components, Pipes, Directive
  declarations: [
    AppComponent
  ],
  // Entry Components
  entryComponents: [
    AppComponent
  ],
  // Providers
  providers: [
  ],
  // Modules
  imports: [
    BrowserModule,
    AppRoutingModule,
    MdListModule,
    MdInputModule,
    MdToolbarModule,
    MdSidenavModule,
    MdButtonModule,
    MdChipsModule
  ],
  // Main Component
  bootstrap: [ AppComponent ]
})
export class AppModule {
  constructor() {

  }
}

[McNairy]

I am experiencing this issue after upgrading from 2.0.0-beta.6 to 2.0.0-beta.11.

[avikenjale]

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

[leeroya]

I fixed this by adding: import {MatListModule} from '@angular/material/list'; to my module

[vis-8757]

@leeroya I did that but the same error keeps coming.
Also I don't have any extra modules being imported like @dungahk has said above.
I'm importing mat-list in app.module.ts and using it in menu.component.html as shown:
Also I don't think I need to import it everywhere like in app.component.ts or menu.component.ts ??

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