Winkel - einschließlich CSS-Datei in index.html

Ich versuche, die angular2-busy Bibliothek in einem Winkel-Projekt, erstellt mit der CLI, aber ich habe ein Problem importieren der Stilvorlage:

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

Browser sagt mir, dass es die Datei nicht finden kann, auch mit den richtigen Pfad. Ich habe auch überprüft, dass die Datei existiert, und das tut es. Wenn ich mit der ich nicht den Fehler, sondern dann ist das die Animationen nicht funktionieren.

Winkel - einschließlich CSS-Datei in index.html

Hier ist das Paket, das ich versuche zu verwenden, wenn jemand neugierig ist:
https://www.npmjs.com/package/angular2-busy

Versuchen Sie es mit einem einzigen ./ so <link href="./node_modules/angular2-busy/build/style/busy.css">
Hat nicht funktioniert. Ich vermute, das hat etwas zu tun mit Angular da bin ich mir nicht sicher, wie Sie Sie behandeln Globale CSS-Dateien.
Sind Sie mit eckig-cli?
Ja, mit Winkel-4.

InformationsquelleAutor ecain | 2017-07-20

  1. 11

    Winkel-CLI haben eine eigene Art und Weise zu initialisieren, Ihre Globale css/js.

    Sie befinden sich in .angular-cli.json Konfiguration

    Suchen Sie "styles": und fügen Sie Ihre css gibt es

    Beispiel :

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

    Hoffe, das hilft.

    Ich bin immer noch nicht bekommen jede Art von animation, die für einige Grund, aber ich bin mir nicht sicher, ob das ist, weil es nicht immer die CSS-Datei.
    Ich bin nicht vertraut mit dem plugin, aber habe gerade eine schnelle Suche auf. Es scheint, wie es erfordert <div [ngBusy]="busy"></div> auf Ihrer Vorlage. Haben Sie die? Sie müssen, um es zu importieren, um Ihre AppModule.
    Ja, und es funktioniert, aber es einfach erscheint eine Zeichenfolge. Es ist noch immer handeln die gleiche, wie wenn ich noch keinen link zu der CSS-Datei überhaupt. Also für mich bedeutet, dass es nicht "Lesen" - Datei.
    Wenn Sie wissen, was Stile, die Sie überprüfen können, Stile.xxx.bundle.css und sehen, ob es enthält die zu erwartenden Klassen
    yup, das problem ist, dass das bundle.css-Datei wird nur generiert, mit ng bauen, ng dienen, produziert eine bundle.js Datei, aber der Prozess ist der gleiche wie der oben genannten zu überprüfen, ob die styles wurden Hinzugefügt

    InformationsquelleAutor penleychan

  2. 4

    Grundsätzlich gibt es drei verschiedene Möglichkeiten :-

    1. Indem Sie das "styles" - array in eckigen-cli.json-Datei, wie @penleychan in seiner Antwort. 
    "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]
    1. Können Sie direkt importieren Sie die css-Datei in styles.css-Datei (oder einer anderen css-Datei) enthalten ist, in der "styles" - array in eckigen-cli.json-Datei durch hinzufügen der @import-Anweisung am Anfang der Datei.
    @import "~bootstrap/dist/css/bootstrap.min.css";
    1. Gehören die css-Datei in index.html Seite, indem ein link-element.

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

    Finden Sie eine mehr ausgearbeitete Erklärung und ein paar weitere alternativen in diesem link

    Dies sollte die Antwort sein.

    InformationsquelleAutor yatharth varshney

  3. 1

    Versuchen

      <link rel="stylesheet" href="node_modules/angular2-busy/build/style/busy.css" >
    Noch immer die gleichen Fehler. Ich sollte hinzufügen, dass ich mich auch mit Bootstrap und habe keine Probleme bei der Einfuhr Ihrer CSS-Datei von einem CDN.
    wo ist deine index-Datei?auf dieser Basis müssen Sie den Pfad anpassen
    Index 1 Ordner Weg von der node_modules Ordner. Ich habe versucht, mit .. zu gehen bis ein Ordner, aber es funktioniert immer noch nicht.

    InformationsquelleAutor Sajeetharan

  4. 0

    Ihnen fehlt, sind die selbst-schließende /am Ende des Codes. Es ist möglich, der browser ist nicht in Ordnung für Sie.

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

    Entfernen wäre definitiv nicht das problem beheben, da der browser muss genau wissen, welche Referenz Sie sich beziehen.

    Wenn die Befestigung der End-tag nicht funktioniert, dann ist dein Pfad falsch ist. Sie können auch versuchen, hinzufügen von ein .. /" am Anfang eines Weges. Dadurch wird es relativ zum Ordner der Seite ist.

    <link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />
    Sie brauchen nicht ein / am Ende einen link.
    Sie tun, wenn Sie versuchen, um Ihren code kompatibel mit älteren Browsern, die würde das kompilieren fehlschlagen, die Linie. Und nicht am Ende von dem link, der am Ende der html-Zeile. Es ist ein self-closing tag / nicht ein schließen / für hyperlink-Referenz.
    Gotcha. Leider noch nicht behoben das Problem.
    können Sie posten Ihre Verzeichnis-Struktur??? das könnte uns helfen herauszufinden, warum dein link nicht funktioniert. Versuchen Sie, dies zu tun. Nehmen Sie die Datei und fügen Sie es zu Ihrem root-Ordner WWW und dann nur der Verweis, der es über seinen Namen "beschäftigt.css"

    InformationsquelleAutor CodeSurvivor

Schreibe einen Kommentar