Angulaire du matériel ne Pouvait pas trouver Angulaire Matériau de base à thème

Dans mon Angular2 projet, j'ai installer les derniers matériaux plugin de https://material.angular.io/guide/getting-started. J'ajoute ensuite les @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; de mon fichier css pour mon composant. Mais dans ma console Angulaire affiche cette erreur:

matériel.es5.js:148 ne Pouvait pas trouver Angulaire Matériau du thème de base. La plupart des composants peuvent ne pas fonctionner comme prévu. Pour plus d'informations, reportez-vous à la thématisation guide: https://material.angular.io/guide/theming`

Les composants matériels ne fonctionne pas.
Quoi de mal?

Si je me souviens bien, ce fichier est un fichier SASS (.scss), peut-être vous pouvez essayer avec qui?
Je n'ai pas de fichier sass
Non, vous n'avez pas de fichiers sass, mais l'angle de matériau de module. C'est la façon dont vous utilisez votre propre thème (encore une fois, si je me souviens bien), donc essayez de voir dans le nœud du module si c'est un SASS ou fichier css.
Si vous travaillez sur un custom de la thématisation de projet, et vous avez ajouté un fichier à votre "angulaire.json" fichier, assurez-vous d'arrêter le ng servir et de le redémarrer pour le nouveau thème".scss" à charger.

OriginalL'auteur lukassz | 2017-05-28

  1. 88

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

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

    Vous pouvez sélectionner n'importe quel css en vertu de la prêts à l'emploi-thèmes dossier.

    Tout comme @jelbourn mentionné à l'Questions 4739: Charge prêts à l'emploi-thèmes dans Global (les styles.css), plutôt que dans la Composante de styleUrls.
    Utilisez ~ pour faciliter le chemin vers le nœud modules. Exemple: @import '~@angulaire/matériel/prédéfinis-thèmes/deeppurple-d'ambre.css';
    @BraveNinja dit, tilde "~" vous permet d'éviter les problèmes avec les chemins d'accès. Voir stackoverflow.com/a/39535907/877464 pour une meilleure explication.
    pourquoi ce n'est pas gérée par angulaire ajouter @angulaire/matériau lui-même?

    OriginalL'auteur codelovesme

  2. 14

    Je l'ai eu à travailler avec les étapes suivantes:

    1) de l'Importer (ou d'autres) Matériau thème dans votre fichier css principal:

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

    2) assurez-vous Également d'enregistrer ce fichier css avec le app.composant fichier

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

    3) vérifiez que les composants dont vous avez besoin sont importés de @anguleuse/matière dans votre app.module fichier

    import { MdCardModule, MdInputModule } from '@angular/material';
    Il a sauvé mon temps. Merci.

    OriginalL'auteur cmcevoy

  3. 5

    placer ce code dans votre angulaires-cli.fichier json

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

    il fonctionne très bien pour moi

    OriginalL'auteur Mohammad Zeeshan

  4. 3

    Si vous utilisez Angulaires-CLI, vous aurez besoin de faire une référence à l'thèmes fichier, par exemple: "des bonbons.scss" dans le .angulaire de la cli.fichier json. Regardez de près, vous avez un *.scss? C'est un fichier Sass. Regardez ici pour plus d'informations: Angulaire Matériel 2 Thématisation instructions. Ainsi, dans l' .angulaire de la cli.json, en vertu de l'styles de propriété, d'ajouter des "thèmes/bonbons.scss", à côté de la "thèmes/styles.css". J'ai un dossier dans mes projets appelés "thèmes". J'ai mis les styles.css et les bonbons.scss dans le dossier thèmes. Maintenant, Angulaires-CLI pouvez trouver votre thème.

    C'est la clé, merci!

    OriginalL'auteur LargeDachshund

  5. 2

    Si ce qui se passe pendant le test avec le Karma, ajoutez les éléments suivants pattern à la files liste dans votre karma.config.js fichier.

    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

    OriginalL'auteur The Aelfinn

  6. 2

    Ajouter @import "~@angulaire/matériel/prédéfinis-thèmes/indigo-rose.css" dans le style.css

    OriginalL'auteur Pulkeet Katiyar

  7. 2

    En plus de @déclarations d'importation comme mentionné ci-dessus. Veuillez vous assurer que vous ajoutez
    encapsulation: ViewEncapsulation.Aucun à l'intérieur de @Composante décorateur.

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

    Si vous êtes à la recherche Angulaire du Matériel d'installation .Net de base 1.1 ou 2.0 Angulaire SPA modèle visual studio. Veuillez trouver le bien documenté instruction d'installation de détails ici.

    OriginalL'auteur Venkatesh Muniyandi

  8. 0

    a fonctionné pour moi l'ajout dans la section css de index.html 

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

    Comme mentionné ici ici

    OriginalL'auteur naila naseem