Angular2 cli with material: Argument `$map` of `map-get($map, $key)` must be a map

Question

Since I have updated my environment to newer versions of @angular/cli and @angular/material I can't get my angular2 application run.

ERROR in ./src/app/components/general/table/table.scss
Module build failed:
undefined
          ^
  Argument `$map` of `map-get($map, $key)` must be a map

Backtrace:
    node_modules/@angular/material/core/option/_option-theme.scss:5, in function `map-get`
    node_modules/@angular/material/core/option/_option-theme.scss:5, in mixin `mat-option-theme`
    node_modules/@angular/material/core/_core.scss:30, in mixin `mat-core-theme`
    node_modules/@angular/material/core/theming/_all-theme.scss:29, in mixin `angular-material-theme`
    src/satellic-theme.scss:21
  in C:\STP-CAS\workspace\cdhub_cockpit\node_modules\@angular\material\core\ option\_option-theme.scss (line 5, column 16)
 @ ./src/app/components/general/table/table.component.ts 133:21-44
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

The error seems to be in @angular/material/core. Does anyone have a idea how to solve this issue?

score 1 · Answer 1 · edited May 23 '17 at 12:32

This little changes helps me to customize angular material theme and avoid this 'map-get' error:



    @import '~@angular/material/core/theming/all-theme';

    // Customize angular-material theme

    $brand-indigo: (
            50: #e0ebf3,
            100: #b3cee1,
            200: #80adce,
            300: #4d8cba,
            400: #2673ab,
            500: #3DBAFC,
            600: #005294,
            700: #00488a,
            800: #3DBAFC,
            A200: #6a9bff,
            A400: #3778ff,
            A700: #1e67ff,
            contrast: (
                    500: white,
                    600: white,
                    700: white,
                    800: white,
                    900: white,
                    A700: white,
            )
    );

    $brand-orange: (
            50: #fef3e4,
            100: #fde0bb,
            200: #fccc8e,
            300: #fab861,
            400: #f9a83f,
            500: #f8991d,
            600: #f7911a,
            700: #f68615,
            800: #f57c11,
            900: #f36b0a,
            A100: #ffffff,
            A200: #fff1e9,
            A400: #ffd1b6,
            A700: #ffc19c,
            contrast: (
                    500: white,
                    600: white,
                    700: white,
                    800: white,
                    900: white,
                    A700: white,
            )
    );
    @include mat-core();

    // mandatory stuff for theming
    $primary-palette: mat-palette($brand-indigo);
    $accent-palette:  mat-palette($brand-orange);
    //$ae-warn-palette: mat-palette(red);

    // include the custom theme components into a theme object
    $main-theme: mat-light-theme($primary-palette, $accent-palette);

    //select primary and secondary colors
    $primary-color: map_get($primary-palette, 500);
    $secondary-color: map_get($accent-palette, 500);

    // include the custom theme object into the angular material theme
    @include angular-material-theme($main-theme);

>>> Original answer <<<

Angular2 cli with material: Argument `$map` of `map-get($map, $key)` must be a map

1 Answers1