styleUrls not working in Angular 2

user_4437655 0
Viewed 61698

I'm using Angular 2 with SystemJS and trying to add a stylesheet to a component.
Since I'm using SystemJS I can't use relative path as of now, so I used absolute path for the component's template url and also the style url.
However inline style works fine (i.e styles: ['h1 {font-size: 12px; }'] )

The component looks something like this: 

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

The stylesheet dashboard.css never gets loaded(nor does it returns any error).

enter image description here



Versions of the tools:

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

systemjs angular2-template angular
8 Answers

If you are using PrimeNG or Angular Material in your project that styleUrl will not work like this. You need to import ViewEncapsulation and put encapsulation: ViewEncapsulation.None in the @component definition.

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

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

Relative paths to the current file with the moduleId from @boskicthebrain's solution worked for me.

However since I am on webpack, the css files in this case have to be loaded with the raw-loader (instead of the style-loader/css-loader combination since the style-loader is not for server-side AOT) and let angular do it's work.

At the end, since the ::ng-deep operator is deprecated and the styles are very scope restrictive, I dumped all of it and went with a simple import import './my-component.component.css'; at the top of the .component.ts file. This has the benefit of being loaded with the component while also being global CSS.

user_78335170
Related