带有材质的Angular2 cli:`map-get($ map,$ key)`的参数`$ map`必须是一张地图

时间:2017-03-09 12:38:02

标签: angular angular-material

由于我已将环境更新为更新版本的@ angular / cli和@ angular / material,因此我无法运行angular2应用程序。

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

错误似乎在@ angular / material / core中。有谁知道如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

这一点变化有助于我自定义棱角分明的材质主题并避免这种情况下的地图获取'错误:



    @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 <<<