1

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:

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.

Screenshot

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.

echo_salik
  • 842
  • 1
  • 18
  • 35
  • Btw: you do not do `MaterialModule` anymore. Instead you just include the modules of the components you need like `MdButtonModule` and so on. Take a look here: [Getting started](https://material.angular.io/guide/getting-started). – pzaenger Jul 17 '17 at 07:42
  • what is the sequence of `stylesheets import`? update the css includes to your post – Aravind Jul 17 '17 at 07:43
  • @pzaenger yeah i initially tried that, same error. Hence stuck to this. – echo_salik Jul 17 '17 at 07:48
  • @Aravind there is only one import. Nothing else. – echo_salik Jul 17 '17 at 07:48
  • Guys I got it to work but it looks more like a hack rather then working. I added the stylesheet, the CSS, to the `assets` folder, added its location in `angular-cli.json` and voila it works. Now the real question, why does this work and the method provided in the Docs doesn't? – echo_salik Jul 17 '17 at 09:06
  • add this line in style.css `@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';` – nmanikiran Jul 17 '17 at 12:00
  • I have already done that. I somehow forgot to mention this in my question. The theme is getting registered but not soon enough for material to know its loaded. – echo_salik Jul 17 '17 at 12:03

1 Answers1

-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.enter image description here

. 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.enter image description here

Balaji B
  • 329
  • 4
  • 9
  • My setup is same, except the custom styles. The problem is not the CSS file, it gets loaded but i guess after the material has checked. This is my css: http://imgur.com/a/WB0Xa – echo_salik Jul 17 '17 at 08:37
  • Forgot to say, still the same error. I added the `body` style after reading your answer. – echo_salik Jul 17 '17 at 08:38
  • I am down voting your answer for the following reasons: the css is being loaded as displayed in the image in question; the import command is mentioned in the question above and in the comment where i specify it is the only command in the css file. – echo_salik Jul 17 '17 at 08:48
  • Thank you for trying though. – echo_salik Jul 17 '17 at 08:48