css - Angular 2 external style doesn't get inlined to header

Question

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)

Answer 1

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:

• https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/style_url_resolver.ts#L12

  export function isStyleUrlResolvable(url: string): boolean {
    if (isBlank(url) || url.length === 0 || url[0] == '/') return false; // <-----
    var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url);
    return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset';
  }
  

Hope it helps you, Thierry