styleUrls not working in Angular 2

rakeen picture rakeen · Mar 24, 2016 · Viewed 55.2k times · Source

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

Answer

thomallen picture thomallen · Jul 7, 2016

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