web-dev-qa-db-fra.com

Comment corriger l'erreur "Impossible de trouver Angular Material core theme" dans Angular 2?

Je suis pratiquement nouveau dans Angular2 et j'ai hérité du projet avec Angular 2 frontend. Après être passé au nouveau Angular 4.0 sur la console, je vois l'erreur:

"compatibilité.ts: 221 Impossible de trouver Angular Thème principal du matériau. La plupart des composants du matériau peuvent ne pas fonctionner comme prévu. Pour plus d'informations, reportez-vous au guide de thème: https: // matériel .angular.io/guide/theming "

Le mdb.min.css se trouve dans le dossier app/assets/css. La spécification dans package.json montre ce qui suit:

"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
...
"angular-bootstrap-md": "*"

Comment corriger l'erreur?

cssangularangular-material2
7
Alex

Vous devez importer un thème dans votre fichier css ou sass global:

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

ou l'inclure dans votre index.html fichier:

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

Comme dans la documentation thématique déjà mentionné Angular Material fournit les thèmes pré-construits suivants:

  • deeppurple-amber.css
  • Indigo-pink.css
  • pink-bluegrey.css
  • violet-vert.css

Vous devez inclure l'un de ces thèmes ou vous créez votre propre thème personnalisé.

12
Philipp Kief

Ajout de @import à styles.css ne fonctionne pas pour moi, l'ajout d'un thème à angular.json a fait l'affaire

Vous pouvez remplacer le thème de matériau angulaire par défaut par l'un des thèmes de matériau angulaire mentionnés ci-dessus en utilisant les méthodes suivantes.

Vous pouvez directement inclure le thème de matériau angulaire prédéfini dans le fichier styles.css.

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

Ou ajoutez ce qui suit à l'intérieur de la balise head du fichier index.html.

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

Ou Mettez à jour les éléments suivants dans le fichier angular.json.

"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
},
"src/styles.css"
],
1
Masoud Bimar

J'ai eu le même problème lors de la mise à niveau de Angular version 7 vers 8. Même après importation dans le fichier .sass/index.html/angular.json file. J'ai essayé de mettre à niveau angular matériel séparément à nouveau, cela a résolu le problème.

ng update @ angular/material @ latest

0
Srividhya Seshadri

Veuillez insérer le code ci-dessous dans votre styles.css ou styles.scss 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 des thèmes prédéfinis.

0
himanshu sharma