Angular material Impossible de trouver le thème de base d'Angular Material

Question

Dans mon projet Angular2, j'installe le dernier plugin material à partir de https://material.angular.io/guide/getting-started. Ensuite, j'ajoute @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; à mon fichier css pour mon composant. Mais dans ma console Angular affiche cette erreur :

material.es5.js:148 Impossible de trouver le thème principal Angular Material. La plupart des composants Material pourraient ne pas fonctionner comme prévu. Pour plus d'informations, consultez le guide de thèmes : https://material.angular.io/guide/theming

Les composants Material ne fonctionnent pas. Quel est le problème ?

Answer 1

Veuillez insérer le code ci-dessous dans votre fichier styles.css situé dans votre dossier src.

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

Vous pouvez choisir n'importe quel CSS dans le dossier prebuilt-themes.

Answer 2

Mettez ce code dans votre fichier angular-cli.json

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

ça fonctionne bien pour moi

Answer 3

J'ai réussi à le faire fonctionner en suivant ces étapes :

1) Importez ce thème (ou un autre) Material dans votre fichier css principal :

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

2) Assurez-vous également d'enregistrer ce fichier css principal avec le fichier app.component

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

3) Vérifiez à nouveau que les composants dont vous avez besoin sont importés de @angular/material dans votre fichier app.module

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

Answer 4

Si cela se produit pendant les tests avec Karma, ajoutez le pattern suivant à la liste des files dans votre fichier 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}
    ],
    ...
}

Pour plus de détails, voir ici: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

Answer 5

Si vous utilisez Angular-CLI, vous devrez faire référence au fichier de thèmes, par exemple "candy.scss", dans le fichier .angular-cli.json. Regardez attentivement, avez-vous un fichier *.scss? C'est un fichier Sass. Regardez ici pour plus d'informations: Instructions de theming Angular Material 2. Ainsi, dans le fichier .angular-cli.json, sous la propriété styles, ajoutez "themes/candy.scss", à côté de "themes/styles.css". J'ai un dossier dans mes projets appelé "themes". J'ai mis les styles.css et le candy.scss dans le dossier themes. Maintenant, Angular-CLI peut trouver votre thème.