0
470
ViewsstyleUrls not working in Angular 2
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
3 answers
Answer question0
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']
})
0
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']
})
0
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']
})