web-dev-qa-db-fra.com

styleUrls ne fonctionne pas dans Angular 2

J'utilise Angular 2 avec SystemJS et j'essaie d'ajouter une feuille de style à un composant.
Depuis que j'utilise SystemJS, je ne peux pas utiliser le chemin relatif à partir de maintenant, j'ai donc utilisé le chemin absolu pour l'URL du modèle du composant ainsi que pour l'URL du style.
Cependant, le style en ligne fonctionne bien (i.e styles: ['h1 {font-size: 12px; }']) 

Le composant ressemble à ceci: 

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

La feuille de style dashboard.css n'est jamais chargée (elle ne renvoie aucune erreur). 

 enter image description here



Versions des outils:

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

angularsystemjsangular2-template
27
rakeen

Il vous suffit de supprimer la barre oblique du début du chemin styleUrls comme ceci:

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

La documentation angulaire 2 indique que SystemJS expose la variable __moduleName requise pour les noms relatifs, tout comme module.id pour CommonJS ... Avez-vous déjà essayé?

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

Je viens d'avoir le même problème avec le tutoriel Heroes. Le moduleId a résolu le problème:

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

Sans le moduleId, seuls les styles en ligne et les modèles fonctionnent.

3
boskicthebrain

J'ai essayé d'implémenter styleUrls: in plunker sample. Cela a fonctionné pour moi.

J'ai utilisé ce qui suit:

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

Recherchez les fichiers app.component.ts et app-root.style.css.

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

2
Sayed Wakil

Si vous utilisez PrimeNG ou un matériau angulaire dans votre projet, styleUrl ne fonctionnera pas comme ceci. Vous devez importer ViewEncapsulation et mettre encapsulation: ViewEncapsulation.None dans la définition de @component.

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

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

pour cela, vous n'avez pas besoin de supprimer les barres obliques finales ou quoi que ce soit, en fait, je faisais aussi cette erreur et la page HTML ne faisait pas de lien avec le fichier css.

En fait, je faisais une erreur stupide: Html page comme:

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

fichier css en tant que:

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

Erreur que j'obtenais en tant que: Cette inspection détecte les sélecteurs CSS inconnus et permet de les déclarer en tant que classe ou id -

Donc, le htiong que vous devez faire est: Définir le paramètre à id ou class tout ce que vous avez déclaré dans le fichier html comme:

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

l'URL du style a l'air juste tant que le fichier index.html est dans le dossier au-dessus de l'application.

De plus, dans le balisage HTML, la classe doit être définie sur ce que vous voulez dans les styles.

0
foxjazzHack

Les chemins relatifs vers le fichier actuel avec la solution moduleId de @boskicthebrain ont fonctionné pour moi.

Cependant, depuis que je suis sur webpack, les fichiers css dans ce cas doivent être chargés avec raw-loader (au lieu de la combinaison style-loader/css-loader puisque le chargeur de style n’est pas destiné à AOT côté serveur) et laissez angular faire son travail.

À la fin, étant donné que l'opérateur ::ng-deep est deprecated et que les styles sont très restrictifs, j'ai tout vidé et je suis parti avec une simple importation import './my-component.component.css'; en haut du fichier .component.ts. Cela a l’avantage d’être chargé avec le composant tout en étant global CSS.

0
George