Could not find Angular Material core theme

Question

I have added angular material2 package to my project. However, I get the following warning message in browser i have created a custom scss file and imported the packages still it throw's warning message:

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: material.es5.js?7d89:180 https://material.angular.io/guide/theming

I have created styles.scss file and included following configuration file

Package

 "@angular/material": "^2.0.0-beta.8",

styles.scss

In styles.scss @include mat-core() while hovering mouse on 'mat-core' displays (Undeclared mixin)warning message

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

app.component.ts

require('./app.component.css');

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./style.scss'],
    encapsulation: ViewEncapsulation.None
})

Webpack.common.js

  module: {
        rules: [

{
                 test: /\.scss$/,
                 exclude: /node_modules/,
                 use: [
                     {
                         loader: 'raw-loader'
                     },
                     {
                         loader: 'sass-loader'
                     }
                 ]
             },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
            },
  ]
    },

Are you using angular-cli? If so, please ensure that the file name should be in the styles array. — Edric
No i am not using angular-cli. I have added file in styles array still it throws error — Vignesh
@Edric after installing '@angular/compiler-cli' it throws warning message. — Vignesh
@Vas in that post they are using inbuilt scss or css file. Here i have created custom scss file — Vignesh

Vignesh Vignesh · Accepted Answer · 2017-08-21T04:30:05

This simple peace of code solved the issue:

app.module.ts

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

@NgModule({
providers:[ 
            {
            provide: MATERIAL_SANITY_CHECKS,
            useValue: false
            }
       ]
})

Could not find Angular Material core theme

1 Answers