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

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.

Answer 2

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

Answer 3

You can use systemjs and commonjs module dependencies loader, to load templates, styles and other files.

in commonjs moduleId : module.id in systemJs __moduleName

import {Component} from '@angular/core';

@Component({

moduleId:module.id,
selector: "exf-header",
templateUrl: "header.html",
styleUrls:['header.css']

})

export class HeaderComponent {

}