wake-up-neo.net

styleUrls funktionieren nicht in Angular 2

Ich verwende Angular 2 mit SystemJS und versuche, einer Komponente ein Stylesheet hinzuzufügen.
Da ich SystemJS verwende, kann ich jetzt keinen relativen Pfad verwenden, daher habe ich den absoluten Pfad für die Vorlagen-URL der Komponente und auch für die Stil-URL verwendet.
Inline-Stil funktioniert jedoch einwandfrei (d. H. styles: ['h1 {font-size: 12px; }']

Die Komponente sieht ungefähr so ​​aus: 

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['/app/components/dashboard/dashboard.css']
})

Das Stylesheet dashboard.css wird niemals geladen (es wird auch kein Fehler zurückgegeben). 

enter image description here



Versionen der Tools:

~ angular 2: 2.0.0-beta.6
~ systemjs: 0.19.20
~ TypeScript: 1.8.0 

27
rakeen

Sie müssen nur den Schrägstrich wie folgt vom Anfang des styleUrls-Pfads entfernen:

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['app/components/dashboard/dashboard.css']
})
33
thomallen

Angular 2-Dokumente sagen aus, dass SystemJS die __moduleName-Variable verfügbar macht für relative Namen erforderlich, genau wie module.id für CommonJS ... Haben Sie das probiert?

declare var __moduleName: any;
@Component({
    moduleId: __moduleName,
    selector: 'dashboard',
    templateUrl: 'dashboard.html',
    styleUrls: ['dashboard.css']
})
7
Gonzalo Lucero

Ich hatte gerade das gleiche Problem mit dem Heroes-Tutorial. Die moduleId hat das Problem gelöst:

@Component({
  moduleId: module.id, // this is the key
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['dashboard.component.css']
})

Ohne die moduleId funktionieren nur Inline-Stile und Vorlagen.

3
boskicthebrain

Ich habe versucht, styleUrls: in plunker sample zu implementieren. Es hat für mich funktioniert.

Ich habe folgendes verwendet:

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app-root.style.css']
})

Suchen Sie nach der Datei app.component.ts und app-root.style.css

https://plnkr.co/edit/z6tl8o0b8cJ6zGofKfmF?p=preview

2
Sayed Wakil

Wenn Sie in Ihrem Projekt PrimeNG oder Angular Material verwenden, funktioniert styleUrl nicht so. Sie müssen ViewEncapsulation importieren und encapsulation: ViewEncapsulation.None in die @component-Definition einfügen.

import { Component, Output, Input, ViewEncapsulation} from '@angular/core';

@Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'message-center',
   templateUrl: './messagecenter.component.html',
   styleUrls: ['./messagecenter.component.css']
})
1

dazu müssen Sie keinen nachgestellten Schrägstrich oder irgendetwas entfernen. Eigentlich machte ich auch diesen Fehler und die HTML-Seite war nicht mit der CSS-Datei verlinkt.

Eigentlich machte ich einen dummen Fehler: HTML-Seite als:

<img src="../../assets/images/logo.png" alt="LOGO" class="responsive-img login-logo-width">

cSS-Datei als:

login-logo-width {
   width: 260px;
}

Fehler, den ich erhalten habe als: Diese Überprüfung erkennt unbekannte CSS-Selektoren und bietet die Möglichkeit, sie als Klasse oder ID zu deklarieren.

Daher müssen Sie Folgendes tun: Definieren Sie den Parameter für die ID oder die Klasse, je nachdem, was Sie in der HTML-Datei als Folgendes deklariert haben:

.login-logo-width {
    width: 260px;
}
0
NARGIS PARWEEN

die Stil-URL sieht richtig aus, solange sich die index.html im Ordner über der App befindet.

Auch im HTML-Markup muss die Klasse auf das gesetzt werden, was Sie in den Stilen möchten.

0
foxjazzHack

Relative Pfade zur aktuellen Datei mit der moduleId von @boskicthebrain 's Lösung funktionierten für mich.

Da ich jedoch auf webpack bin, müssen die CSS-Dateien in diesem Fall mit dem raw-loader geladen werden (anstelle der Kombination style-loader/css-loader), da der style-loader nicht für serverseitig AOT) und lassen Sie es von winkeln erledigen.

Da am Ende der Operator ::ng-deepdeprecated ist und die Stile sehr einschränkend sind, habe ich alles abgelegt und einen einfachen Import import './my-component.component.css'; am Anfang der Datei .component.ts vorgenommen. Dies hat den Vorteil, dass die Komponente geladen wird und global CSS ist.

0
George