Angular Material 2 Could not find core theme - css

Question

I know this is repeated question, but none of the solutions listed have helped me. I am getting the following error in Console: Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
What I have already done:
Added style key in angular-cli.json Suggested Here
Tried real path to CSS Suggested Here
And few others. I seem to have lost the tabs.
Now the thing that intrigues me is that I have the styles loaded as seen from here.
So is the class that material checks for: mat-theme-loaded-marker.
But I still can't seem to get it to load. Same error.
My AppModule is as follows:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule, Routes } from '#angular/router';
import 'hammerjs';
import { LoginComponent } from './components/login/app';
import { CookieService } from 'ngx-cookie-service';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule } from '#angular/material';
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{ path: '**', component: LoginComponent }
];
#NgModule({
declarations: [
LoginComponent
],
imports: [
FormsModule,
HttpModule,
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
),
MaterialModule
],
providers: [ CookieService],
bootstrap: [ LoginComponent ]
})
export class AppModule { }
PS: I am new to angular 4.

Answer 1

Developing Angular 2 with material design , we need to use some default css from the material component other wise it will show console error in your browser like Could not find Angular Material core theme..To avoid these problem we need to use one of the default theme in your material component.From the below image you can observe 4 prebuilt-themses in youe node_module.
. I am importing one of the themes in my styles.css file. Please look into below screen shot.After that reload the page then you can see there no error message show in your browser console. I hope it will help for you.