Angular material Не вдалося знайти основну тему Angular Material

У своєму проекті Angular2 я встановлюю плагін останнього матеріалу з https://material.angular.io/guide/getting-started . Далі я додаю @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';у свій CSS-файл свій компонент. Але в моїй консолі Angular показує цю помилку:

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

Матеріальні компоненти не працюють. Що не так?

Вставте код нижче у свій style.css, який знаходиться у вашій папці src .

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

Ви можете вибрати будь-який css у папці з попередньо побудованими темами .

Я працював з наступними кроками:

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 / material у файлі app.module

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

помістіть цей код у файл angular-cli.json

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

для мене це чудово працює

Якщо це відбувається під час тестування з 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

Якщо ви використовуєте Angular-CLI, вам потрібно буде зробити посилання на файл тем, наприклад "candy.scss" у файлі .angular-cli.json. Придивіться, чи є у вас * .scss? Це файл Sass. Шукайте тут інформацію: Кутовий матеріал 2 Інструкції щодо тематики . Отже, у .angular-cli.json, у властивості стилів, додайте "themes / candy.scss", поруч із "themes / styles.css". У моїх проектах є папка, яка називається "теми". Я помістив стилі.css та candy.scss в папку тем. Тепер Angular-CLI може знайти вашу тему.

Додати:

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

твоєму style.css

Додайте наступний рядок до вашого src/styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

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

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

На додаток до заяв @import, як уже згадувалося вище. Будь ласка, переконайтеся, що ви додали інкапсуляцію: ViewEncapsulation.None inside @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. Ознайомтеся з добре задокументованими деталями інструкцій з налаштування тут .

Якщо вам потрібні лише піктограми матеріалів, і ви не хочете імпортувати весь матеріал css, використовуйте це, у вашому кореневому css:

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

працював у мене, додаючи в css розділ index.html

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

Як згадано тут

Перевірте будь-який інший @imports у вашому файлі css або scss. Я відчув цю проблему і не міг її вирішити, доки не було видалено інші імпорти.

Додати @import "~@angular/material/prebuilt-themes/indigo-pink.css" ; для style.css вашого кутового проекту.

Якщо вам потрібна будь-яка інша тема, виконайте наступні дії: Вузлові модулі -> @angular -> матеріал -> попередньо вбудовані теми ->

i) глибокий фіолетовий-бурштиновий : @import "~@angular/material/prebuilt-themes/deeppurple-amber.css

ii) індиго-рожевий : @import "~@angular/material/prebuilt-themes/indigo-pink.css

iii) рожево-блакитний : @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

iv) фіолетово-зелений : @import "~@angular/material/prebuilt-themes/purple-green.css

А якщо ви хочете прочитати, ви можете відвідати : Тему вашого додатка Angular Material

У мене була та ж помилка, що і у вас, і я знайшов рішення в одному з коментарів. Оскільки це рішення спрацювало для мене, я хочу опублікувати його як відповідь.

Якщо ваш проект вже був запущений, і ви встановили компоненти матеріалів згодом, вам потрібно спочатку перезапустити проект. Це вже може бути виправленням.

Додати

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'

до файлу style.css , АБО додати

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

у головному розділі файлу index.html

Не знаю, скільки може виявитися корисним, але перезапуск ng-сервера спрацював після випробування різних рішень із переповнення стека.