styleUrls not working in Angular 2

Question

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).

Versions of the tools:

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

Answer 1

You just need to remove the slash from the beginning of the styleUrls path like this:

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

Answer 2

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'] }) 

Answer 3

Angular 2 docs say that SystemJS exposes __moduleName variable required for relative names just like module.id for CommonJS... Have you tried that?

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