'md-card' is not a known element in material 2

Question

I working on a web application using angular 4 and Material 2. I have I get this error

parse errors:
'md-card' is not a known element:
1. If 'md-card' is an Angular component, then verify that it is part of this module.
2. If 'md-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<h2>Nothing to show</h2>
[ERROR ->]<md-card>Simple card</md-card>
"): ng:///AppAccessModule/SPLoginComponent.html@1:0
    at syntaxError 

When I try to use material in a component nested twice inside a folder

these is my structure:

  -----Components(folder)
  -------Auth(folder)
  --------Login(component1)
  --------Signup(component2)

But if I next once like this:

  -------Auth(folder)
  --------Login(component 1)
  --------Signup(component2)

I don't have any issue what should I do to fix this issue? Thanks

Answer 1

import { MatCardModule } from '@angular/material/card';

@NgModule({ ..
 imports: [..
MatCardModule]

Answer 2

In your src/app/modules/app-access.module.ts import the MdCardModule:

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

And add it in the imports:

imports: [ 
        ....
        MdCardModule, 
    ],  

If you are using any other components from material 2, add those as well.