带有材料的Angular2 cli：`map-get（$map，$key）`的参数`$map`必须是地图答案

【问题标题】：Angular2 cli with material: Argument `$map` of `map-get($map, $key)` must be a map带有材料的Angular2 cli：`map-get（$map，$key）`的参数`$map`必须是地图
【发布时间】：2017-03-09 12:38:02
【问题描述】：

由于我已将环境更新为 @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.有谁知道如何解决这个问题？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

这些小改动帮助我自定义 Angular 材质主题并避免出现“map-get”错误：



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

【讨论】：