web-dev-qa-db-fra.com

Angular Matériau - Impossible de résoudre "@ angular/material/theming"

J'ai suivi le guide officiel et créé un app-theme.scss avec le contenu suivant:

@import '~@angular/material/theming';    
@include mat-core();    
$candy-app-primary: mat-palette($mat-Indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);    
$candy-app-warn:    mat-palette($mat-red);    
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);    
@include angular-material-theme($candy-app-theme);

Contenu de styles.css:

@import './app-theme.scss';

Cependant, j'obtiens toujours l'erreur suivante lors de la compilation: Module not found: Error: Can't resolve '@angular/material/theming'. Que dois-je faire pour que cela fonctionne?

angularsassangular-material2
5
nkxandroid

Résolu:

La documentation Angular Material 2 suppose que vous utilisez des feuilles de style sass par défaut. Ceci n'est jamais clairement communiqué ou expliqué. Les étapes répertoriées ci-dessous peuvent être utilisées pour résoudre ce problème.

  1. Renommez styles.css en styles.scss et définissez son contenu en @import './app-theme';
  2. Dans angular-cli.json, remplacez styles: ["styles.css"] par styles: ["styles.scss"]
  3. Redémarrer NPM
9
nkxandroid

Angulaire 6 ou 7

dans Angular 6 or 7, vous devez simplement installer angular-material comme

ng add @angular/material

Que fait cette commande? bien voir ici

  1. Installe angular material, cdk, animations
  2. Ajoute des références au app.module.ts
  3. Ajoute material-icons' référence au index.html
  4. Il vous demande de sélectionner le thème de votre choix et ajoute une référence au package.json (si le thème ne fonctionne pas, importez-le dans styles.css/styles.scss comme décrit ci-dessous).

mais dans les versions précédentes, vous faisiez ces étapes manuellement

Angulaire 5

En utilisant Angular5+, une ou les deux méthodes import fonctionnera pour vous

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

@import "~@angular/material/prebuilt-themes/Indigo-pink.css"; // in official docs
4
WasiF

Essaye ça, 

  1. Changez le nom de votre fichier de thème en _app-theme.scss

  2. Changez votre styles.css en styles.scss

  3. Importez votre thème dans le fichier styles.scss comme suit:

@import './path/to/votre/theme/app-theme'; // Vous n'avez pas besoin du trait de soulignement Et de l'extension de fichier ici

  1. Vous n'avez pas besoin d'inclure votre fichier de thème dans les styles angular-cli.json: []
4
Faisal

Etes-vous sûr d'avoir installé des matériaux angulaires dans ce projet? Parfois, vous ne pouvez copier que le contenu de la page Web, mais sans le dossier node_modules et dans ce cas, le compilateur ne peut pas trouver le chemin "node_modules/@ angular/material/theming".

Essayez juste cette commande et vous verrez. 

npm install --save @angular/material @angular/cdk

Cela pourrait aider.

1
Kolman Robert

Selon le guide officiel que vous avez fourni, vous ne devriez pas importer votre fichier de thème dans votre fichier styles.css, mais plutôt le placer dans le tableau de styles de votre fichier angular-cli.json. Cela devrait être proche de cela:

styles: [
  "app-theme.scss",
  "styles.css"
]
0
Emerson Jair