it-swarm.com.ru

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 `

Материальные компоненты не работают. В чем дело?

54
lukassz

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

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

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

95
codelovesme

Я получил это работая со следующими шагами:

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

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

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

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

3) Проверьте, что необходимые компоненты импортированы из @ angular/material в вашем app.module file

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

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

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

это хорошо работает для меня

6
Mohammad Zeeshan

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

3
LargeDachshund

Если это происходит во время тестирования с помощью 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-inclusive-core-theme-in-test-suite

2
The Aelfinn

Добавьте следующую строку в ваш 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';

2
nPcomp

Добавьте @import "[email protected]/material/prebuilt-themes/Indigo-pink.css" в style.css

2
Pulkeet Katiyar

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

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

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

2
Venkatesh Muniyandi

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

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

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

0
BenSimpsy

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

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

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

0
naila naseem