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

[Yoshiin]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The md-card component should work

What is the current behavior?

It is not recognized
`main.ts:14Error: Template parse errors:
'md-card-subtitle' is not a known element:

1. If 'md-card-subtitle' is an Angular component, then verify that it is part of this module.
2. If 'md-card-subtitle' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
   [ERROR ->]Subtitle first
   Card with titleProjectComponent@1:3
   'md-card-title' is not a known element:
3. If 'md-card-title' is an Angular component, then verify that it is part of this module.
4. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
   Subtitle first
   [ERROR ->]Card with title
   
   

   This is supporting t"): ProjectComponent@2:3
   'md-card-content' is not a known element:

5. If 'md-card-content' is an Angular component, then verify that it is part of this module.
6. If 'md-card-content' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("d-subtitle>Subtitle first
   Card with title
   [ERROR ->]
   

   This is supporting text.

   
   

   Lorem ipsum dolor sit amet, co"): ProjectComponent@3:3
   'md-card-actions' is not a known element:

7. If 'md-card-actions' is an Angular component, then verify that it is part of this module.
8. If 'md-card-actions' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
   
   
   [ERROR ->]
   LIKE
   SHARE
   "): ProjectComponent@8:3
   'md-card' is not a known element:
9. If 'md-card' is an Angular component, then verify that it is part of this module.
10. If 'md-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("[ERROR ->]
    `

What are the steps to reproduce?

Just follow the Read Me

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

@angular/core : 2.0.0
@angular/material : 2.0.0-alpha.9-3
All browsers

Is there anything else we should know?

component.html
<md-card> <md-card-subtitle>Subtitle first</md-card-subtitle> <md-card-title>Card with title</md-card-title> <md-card-content> <p>This is supporting text.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p> </md-card-content> <md-card-actions> <button md-button>LIKE</button> <button md-button>SHARE</button> </md-card-actions> </md-card>

app.module.ts
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { routing, appRoutingProviders } from './app.routing';

/* App component */
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

/* Core Module */
import { CoreModule } from './core/core.module';

import { MaterialModule } from '@angular/material';

@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
CoreModule,
MaterialModule.forRoot(),
FormsModule,
HttpModule,
ChartsModule,
routing
],
providers: [
appRoutingProviders
],
bootstrap: [AppComponent]
})
export class AppModule { }
`

[fxck]

Provide a (non)working reproduction on plnkr, here's a template http://plnkr.co/edit/K0PA5RBThbNDxhQRqhGe?p=preview, using your html code, and it seems to be working just fine.

[jelbourn]

Can't reproduce this problem. We can reopen if you can provide more information.

[PostImpatica]

I had this (with MdIcon) issue using webpack and asynchronously loading a child NgModule. The base of my app was from the Angular2 Webpack Starter. I ended up loading the MdIconModule over again in the child NgModule, this was the only thing that worked and it didn't increase my file size or add the MdIconModule to my child module's chunk thank goodness. I tried loading MaterialModule.forRoot() but that did nothing. By the way, i'm loading the modules independently without using MaterialModule since it didn't work anyway and it bloats the code just a tad.

[PostImpatica]

It looks like you always have to re-import these material modules because child modules break the global scope of loaded modules. I would have thought .forRoot() would have resolved this but it doesn't appear that it does. See this StackOverflow

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

[smaillns]

https://alligator.io/angular/angular-material-2/

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