current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 4 down vote favorite

I have this component definition in typescript:

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: '/views/sandbox.html',
    styleUrls: ['/styles/sandbox.css'],
    styles: [`.wow { background-color: red; }`],
    encapsulation: ViewEncapsulation.Emulated
})
export class SandBox { }

According to this article: http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html both the style in the styles section and in the external stylesheet should be inlined into the header by angular.

Unfortunately, the second does not get injected, angular injects only the one in the styles section.

I have tried accessing /styles/sandbox.css from browser, it is fine. Angular is also able to access /views/sandbox.html so i have no idea why it is not happening.

I am using: "angular2": "2.0.0-beta.2" (latest beta AFAIK)

share|improve this question
    
Does it inject when you remove the styleUrls property? – PierreDuc Feb 3 at 22:20
    
The 'styles' is always injected. It is the other which is not. – Marcell Feb 3 at 22:36
up vote 5 down vote accepted

I made some tests and strangely styles from the sandbox.css only applies if you use a relative paths within the styleUrls attribute:

@Component({
  selector: 'my-app',
  templateUrl: '/views/sandbox.html',
  styleUrls: ['../styles/sandbox.css'],
  styles: [`.wow { background-color: red; }`],
  encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
  constructor() {
  }
}

Edit

After having a look at the source code, Angular2 prevents from using absolute path for the styleUrls. See this line:

Hope it helps you, Thierry

share|improve this answer
    
It works, thanks! However, i wonder whether it is a bug... as absolute url works with 'templateUrl' but not with 'styleUrls' – Marcell Feb 4 at 21:43
    
After having a look at the source code, there is a test that prevents from using this... I updated my answer. – Thierry Templier Feb 5 at 9:47
    
I added an issue in the angular repo regarding this: github.com/angular/angular/issues/6905. I'm looking forward to having an answer from them ;-) – Thierry Templier Feb 5 at 10:33
up vote 0 down vote

The Best way to fix this is use another css file for your component and add it to your StyleUrls list. Cleaner and will scale as you components grow.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.