web-dev-qa-db-fra.com

Matériau angulaire Impossible de trouver le thème principal Matériau angulaire

Dans mon projet Angular2, j'installe le dernier plugin matériel à 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 montre cette erreur:

material.es5.js: 148 Impossible de trouver le thème principal Matériau angulaire. La plupart des composants matériels peuvent ne pas fonctionner comme prévu. Pour plus d'informations, reportez-vous au guide de thème: https://material.angular.io/guide/theming ` 

Les composants matériels ne fonctionnent pas ... Qu'est-ce qui ne va pas? 

angularthemes
45
lukassz

Veuillez insérer le code ci-dessous dans votre style.css qui se trouve dans votre dossier src .

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

Vous pouvez sélectionner n'importe quel css sous le dossier prebuilt-themes .

95
codelovesme

Je l'ai obtenu avec les étapes suivantes:

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 que les composants dont vous avez besoin sont importés de @ angular/material dans votre app.module file.

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

mettez ce code dans votre fichier angular-cli.json

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

ça marche bien pour moi

6
Mohammad Zeeshan

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 * .scss? C'est un fichier Sass. Regardez ici pour information: Matériau angulaire 2 Instructions de théming . 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é "thèmes". Je mets les styles.css et candy.scss dans le dossier themes. Angular-CLI peut maintenant trouver votre thème.

3
LargeDachshund

Si cela se produit pendant les tests avec Karma, ajoutez la pattern suivante à la liste files de 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

2
The Aelfinn

Ajoutez la ligne suivante à votre src/styles.css

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

Vous pouvez également essayer d'autres cours de Css. Voici les cours disponibles:

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

2
nPcomp

Ajouter @import "~@angular/material/prebuilt-themes/Indigo-pink.css" dans style.css

2
Pulkeet Katiyar

En plus des déclarations @import mentionnées ci-dessus. Assurez-vous d’ajouter Encapsulation: ViewEncapsulation.None à l’intérieur de @Component Decorator.

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

Si vous recherchez une configuration de matériau angulaire pour un modèle de studio visuel angulaire pour SPA. 1.1 ou 2.0. Veuillez trouver les informations d’installation bien documentées ici .

2
Venkatesh Muniyandi

Si vous n'avez besoin que des icônes de matériau et que vous ne souhaitez pas importer l'intégralité du css de matériau, utilisez ceci, dans votre css racine:

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

Vérifiez tous les autres @imports dans votre fichier css ou scss. J'ai rencontré ce problème et je ne pouvais pas le résoudre tant que les autres importations n'auraient pas été supprimées.

0
BenSimpsy

Ajoutez @ import "~@angular/material/prebuilt-themes/Indigo-pink.css" ; à style.css de votre projet angular.

Si vous souhaitez un autre thème, suivez simplement les étapes suivantes: Modules de nœud -> @angular -> matériau -> thèmes pré-construits ->

i) deeppurple-amber : @ import "~@angular/material/prebuilt-themes/deeppurple-amber.css

ii) rose indigo : @ import "~@angular/material/prebuilt-themes/Indigo-pink.css

iii) rose-bleu gris : @ import "~@angular/material/prebuilt-themes/pink-bluegrey.css

iv) violet-vert : @ import "~@angular/material/prebuilt-themes/purple-green.css

Et si vous voulez lire, vous pouvez visiter : Theming your Angular Application matérielle

0
octogenex

travaillé pour moi en ajoutant dans la section css de index.html 

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

Comme mentionné ici ici

0
naila naseem