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

Question

I am working on a web application using angular 4 and Material 2. I have 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 in a folder

this is my structure:

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

But if I next time like this:

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

I don't have any problems, what should I do to fix this problem? Thanks

Answer 1

In src/app/modules/app-access.module.tsimport MdCardModule:

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

And add it to the import:

imports: [ 
        ....
        MdCardModule, 
    ],  

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

Answer 2

MaterialModule, - 3. Material, , .. MdCardModule BoomMaterialModule, , .

:

import { MaterialModule,MdSelectModule } from '@angular/material';
         ^^^^^^^^^^^^^^

import MdCardModule

BoomMaterialModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  ...
  MdExpansionModule
} from '@angular/material';
import 'hammerjs';

@NgModule({
  imports: [
    CommonModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    ...
    MdExpansionModule
  ],
  exports: [
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    ...
    MdExpansionModule
  ]
})
export class BoomMaterialModule {
}