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\',
    tem         


        

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