Angulaires - y compris le fichier CSS dans index.html

Je suis en train d'utiliser le angular2-busy bibliothèque dans angulaire d'un projet créé avec la CLI, mais j'ai un problème de l'importation de la feuille de style:

<link href="/node_modules/angular2-busy/build/style/busy.css">

Le navigateur me dit qu'il ne trouve pas le fichier, même avec le chemin d'accès correct. J'ai aussi vérifié que le fichier existe, et il le fait. Quand je prends le je n'ai pas l'erreur, mais alors la les animations ne fonctionnent pas.

Angulaires - y compris le fichier CSS dans index.html

Ici est le paquet que je suis en train de l'utiliser, si quelqu'un est curieux:
https://www.npmjs.com/package/angular2-busy

  • Essayez d'utiliser un seul ./ donc <link href="./node_modules/angular2-busy/build/style/busy.css">
  • N'a pas fonctionné. Je soupçonne que cela a quelque chose à voir avec Angular que je ne suis pas sûr de savoir comment ils gérer les fichiers CSS comme ceci.
  • Êtes-vous à l'aide angulaires-cli?
  • Oui, Angulaire 4.
InformationsquelleAutor ecain | 2017-07-20
  1. 13

    Angulaire de la CLI, avoir sa propre façon d'initialiser votre global css/js.

    Ils sont situés dans .angular-cli.json configuration

    Recherchez "styles": et ajouter votre css il y

    Exemple :

    "styles": [
   "../node_modules/angular2-busy/build/style/busy.css",
   "styles.css"
],

    Espère que ça aide.

    • Je ne suis toujours pas obtenir toute sorte d'animation pour une raison quelconque, mais je ne sais pas si c'est parce qu'il n'est pas le fichier CSS.
    • Je ne suis pas familier avec le plugin, cependant juste fait une recherche rapide sur elle. Il me semble qu'il exige <div [ngBusy]="busy"></div> sur votre modèle. Avez-vous l'avoir? Aussi vous oblige à importer dans votre AppModule.
    • Oui, et il fonctionne, mais simplement il affiche une chaîne de caractères. C'est toujours le même que lorsque je n'avais pas de lien vers le fichier CSS à tous. Donc, pour moi qui implique qu'elle n'est pas "lire" le fichier.
    • Pouvez-vous utiliser les navigateurs outils de dev pour comprendre cela? Vous pouvez le faire de 2 façons, soit en inspecter l'élément et voir si le <link /> est-il. Ou de vérifier l'onglet réseau pour voir si le style a été chargé.
    • En regardant l'onglet réseau, le style n'a PAS été chargé. Je suis aussi de remarquer qu'il n'est même pas de chargement par défaut styles.css fichier.
    • les styles ne serez chargé individuellement, ils sont regroupés à l'ensemble (si vous utilisez de la cli)
    • Qui fait sens. Donc, ne nous attendre de n'importe quel fichier CSS pour afficher sur l'onglet réseau? Le seul que je vois est le boostrap.min.css fichier.
    • Dans cet onglet, vous ne verrez que ceux que vous avez inclus directement dans index.html tous les autres devraient apparaître dans quelque chose comme les styles.xxxx.bundle.css. Vous devriez en fait le même pour bootstrap avec "../node_modules/bootstrap/dist/css/bootstrap.min.css" à mon avis, de cette façon, votre application ne marche pas appuyer sur des ressources externes
    • Donc, il y a un moyen de voir si le fichier CSS, j'ai ajouté dans .angular-cli.json est chargé par la cli?
    • Si vous savez ce que les styles sont vous pouvez contrôler que les styles.xxx.bundle.css et voir si elle contient des de la devrait classes
    • et oui, le problème est que le bundle.le fichier css est généré uniquement avec ng construire, ng servir un produit bundle.js fichier, mais le processus est le même que ci-dessus pour vérifier si les styles ont été ajoutés
    • Bien que je vois le bundle.js fichier.
    • ionique, nous avons la carte par styleUrls:[]
    • Et de même le lien de votre JS dans "scripts": [], Ce qui est excellent. Merci beaucoup!

    InformationsquelleAutor penleychan
  2. 4

    Fondamentalement, il existe trois façons différentes de le faire :-

    1. En l'ajoutant à la "styles de tableau dans angulaires-cli.fichier json comme c'est indiqué par @penleychan dans sa réponse. 
    "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]
    1. Vous pouvez importer directement le fichier css dans des styles.fichier css (ou tout autre fichier css) qui est inclus dans les "styles de tableau dans angulaires-cli.fichier json en ajoutant le @import instruction dans la partie supérieure de ce fichier.
    @import "~bootstrap/dist/css/bootstrap.min.css";
    1. Inclure le fichier css dans index.html page en ajoutant un élément de lien.

    <link type="text/css"
    href="node_modules/bootstrap/dist/css/bootstrap.min.css"
    />

    Vous pouvez trouver une explication plus élaborée et un peu plus de solutions de rechange à ce lien

    • Cela devrait être la réponse.
    InformationsquelleAutor yatharth varshney
  3. 1

    Essayer

      <link rel="stylesheet" href="node_modules/angular2-busy/build/style/busy.css" >
    • Toujours la même erreur. Je dois ajouter que je suis aussi à l'aide de Bootstrap et je rencontre pas de problèmes de l'importation de leurs fichier CSS à partir d'un CDN.
    • où est votre fichier d'index?basé sur que vous avez besoin d'ajuster le chemin
    • L'indice est de 1 dossier à l'écart de la node_modules dossier. J'ai essayé d'utiliser .. pour monter un dossier, mais il ne fonctionne toujours pas.
    InformationsquelleAutor Sajeetharan
  4. 0

    Vous manque la fermeture automatique /à la fin de votre code. Il est possible que le navigateur n'est pas la fixation de ce pour vous.

    <link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css" />

    Également de supprimer serait certainement pas de résoudre le problème depuis le navigateur a besoin de savoir exactement quel type de référence vous faites allusion.

    Si la fixation de la balise de fermeture ne fonctionne pas, alors votre chemin est mauvais. Vous pouvez aussi essayer d'ajouter un ../au début de votre chemin. Cela permettra par rapport au dossier, le site est en.

    <link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />
    • Vous n'avez pas besoin d'un / à la fin d'un lien.
    • Vous faire si vous essayez de faire de votre code compatible avec les anciens navigateurs qui ne compiler que ligne. Et ce n'est pas à la fin de son lien à la fin de l'html ligne. C'est une auto balise de fermeture /, pas de clôture / pour une référence de lien hypertexte.
    • Gotcha. Malheureusement, cela n'a pas résolu le problème.
    • vous pouvez poster votre structure de répertoire? qui pourrait nous aider à comprendre pourquoi votre lien ne fonctionne pas. Essayez de faire cela. Prenez le fichier et l'ajouter à la racine de votre dossier WWW et puis il suffit de référence à l'aide de son nom "occupé.css"
    InformationsquelleAutor CodeSurvivor