1

I'm trying to set my custom theme in Angular Material. My problem is when i want to import mixin angular-material-theme, i'm getting this error:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/theme.scss Module build failed: undefined ^ Argument $map of map-get($map, $key) must be a map

Backtrace: node_modules/@angular/material/_theming.scss:1166, in function map-get node_modules/@angular/material/_theming.scss:1166, in function mat-color node_modules/@angular/material/_theming.scss:1325, in mixin mat-option-theme node_modules/@angular/material/_theming.scss:3739, in mixin mat-core-theme node_modules/@angular/material/_theming.scss:3808, in mixin angular-material-theme stdin:12 in E:\PC_SHOP\pcShop-Final\PcShop-Final\node_modules\@angular\material_theming.scss (line 1166, column 11)

My sass code:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/_theming.scss';

@include mat-core();

$primary: mat-pallete($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);

$app-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($app-theme);
Improve this question
2
  • 1
    Posting image of code instead of code itself denies index-ability so other users with same error will not find your question by searching for the error message. In short, you ask for help while denying help to others. Consider replacing the image with the code itself. Commented Mar 17, 2018 at 19:24
  • ok, i will remember, thank you Commented Mar 17, 2018 at 20:52

1 Answer 1

Reset to default
2

Just a typo that's all, that's why it doesn't map to a color and you're getting that error (you have pallete instead of palette). Should be:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/_theming.scss';

@include mat-core();

$primary: mat-palette($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);

$app-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($app-theme);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Typos should be signaled in comments, advising towards removal of question. It's not going to help anyone else, and that's the primarily purpose of QA on SO: to be helpful for future visitors. In short, the question is off-topic and should not be answered. Besides, it posts images of code, not the code itself. So it's not going to be index-able for other people with the same error. It's best not to answer low quality questions.
@AndreiGheorghiu it's happened to me before that's how I knew. I couldn't find it on stack overflow anywhere as the error isn't exactly relevant. My answer gives an explanation of the error and the proper solution. While I agree it could be done in a comment, an answer seemed appropriate in this situation.
I just thought it would helpful to you if I told you what general SO principles your answer ignores. For more details, see How to Answer. The decision to let it fly is entirely yours. Happy coding! ツ