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)
See Question&Answers more detail:os