Angular материал Не удалось найти Angular Тема основного материала

В моем проекте Angular2 я устанавливаю последний плагин материала из https://material.angular.io/guide/getting-started. Затем я добавляю @import '[email protected]/material/prebuilt-themes/deeppurple-amber.css'; в мой файл css для моего компонента. Но в моей консоли Angular отображается эта ошибка:

material.es5.js: 148 Не удалось найти Angular Тема основного материала. Большинство компонентов материалов могут работать не так, как ожидалось. Для получения дополнительной информации обратитесь к руководству по тематике: https://material.angular.io/guide/theming`

Компоненты материала не работают. Что не так?

Ответ 1

Вставьте следующий код в style.css, который находится в папке src.

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Вы можете выбрать любой CSS в папке prebuilt-themes.

Сокращенная версия:

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

Ответ 2

Я начал работать со следующими шагами:

1) Импортируйте эту (или другую) материальную тему в основной файл css:

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2) Также обязательно зарегистрируйте этот основной файл css с файлом app.component

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3) Дважды проверьте, что необходимые вам компоненты импортируются из @ angular/материала в ваш файл app.module

import { MdCardModule, MdInputModule } from '@angular/material';

Ответ 3

поместите этот код в ваш файл angular-cli.json

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

Он отлично работает для меня

Ответ 4

Если это происходит во время тестирования с помощью Karma, добавьте следующий pattern в список files в ваш karma.config.js файл.

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

Подробнее см. здесь: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

Ответ 5

Если вы используете Angular -CLI, вам нужно будет сделать ссылку на файл тем, например. "candy.scss" в файле .angular-cli.json. Посмотрите внимательно, у вас есть *.scss? Это файл Sass. Посмотрите здесь информацию: Angular Материал 2 Инструкции по настройке. Итак, в .angular-cli.json, под свойством styles, добавьте "themes/candy.scss", рядом с "themes/styles.css". У меня есть папка в моих проектах под названием "темы". Я помещаю styles.css и candy.scss в папку тем. Теперь Angular -CLI может найти вашу тему.

Ответ 6

Добавлять:

@import "[email protected]/material/prebuilt-themes/indigo-pink.css"

на ваш style.css

Ответ 7

Добавьте следующую строку в ваш src/styles.css

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

Вы можете попробовать и другие классы Css. Вот доступные классы:

@import '[email protected]/material/prebuilt-themes/indigo-pink.css';

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

@import '[email protected]/material/prebuilt-themes/pink-bluegrey.css';

@import '[email protected]/material/prebuilt-themes/purple-green.css';

Ответ 8

В дополнение к операторам @import, как указано выше. Пожалуйста, убедитесь, что вы добавили encapsulation: ViewEncapsulation.None внутри @Component decorator.

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

Если вы ищете Angular Настройка материала для .Net core 1.1 или 2.0 Angular Шаблон визуальной студии SPA. Пожалуйста, найдите подробные данные инструкции по настройке здесь.

Ответ 9

у меня работало добавление в css секции index.html

 <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Как уже упоминалось здесь

Ответ 10

Проверьте любые другие @imports в вашем файле CSS или SCSS. Я столкнулся с этой проблемой и не мог решить ее, пока не был удален другой импорт.

Ответ 11

Если вам нужны только значки материалов и вы не хотите импортировать весь материал CSS, используйте это в своем корневом CSS:

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}

Ответ 12

Добавьте @import "[email protected]/material/prebuilt-themes/indigo-pink.css"; в style.css вашего angular проекта.

Если вам нужна другая тема, просто следуйте инструкциям: Узловые модули → @angular → материал → prebuilt-themes ->

i)deeppurple-янтарный: @import "[email protected]/material/prebuilt-themes/deeppurple-amber.css

ii)индиго-розовый: @import "[email protected]/material/prebuilt-themes/indigo-pink.css

iii)розово-голубоватый: @import "[email protected]/material/prebuilt-themes/pink-bluegrey.css

iv)фиолетово-зеленый: @import "[email protected]/material/prebuilt-themes/purple-green.css

И если вы хотите прочитать, вы можете посетить:Тематическое приложение Angular Material