AngularJS 2 styleUrls: What about concatenation?

Question

My AngularJS 2 application has several style files that I associate with the gulp task. This is all fine, as they will end up in a large file that I send to the browser at the factory. My question is about Angular 2 @Component and its styleUrls attribute.

 @Component({ selector: 'hero', templateUrl: 'hero/hero.template.html', styleUrls: ['hero/hero.component.css'], inputs: ['hero'] }) 

Thanks to shadow DOM emulation in default mode (emulated), the styles defined in hero/hero.component.css apply only to the component in exactly the same way as I want. My question is: what happens with concatenation? I cannot combine all CSS files specified in several styleUrls , since we defeat the goal of encapsulation: styles for the component will flow throughout the document. However, I do not want you to make a call in every CSS file that the component requires. How can I concatenate these styles (and possibly minimize them) so that the client receives them all in one call and still retains the encapsulation?

Answer 1

Template and css files can be linked to js files using the system js plugin.

 import { Component } from '@angular/core'; import html from './hero/hero.template.html!text'; import css from './hero/hero.component.css!text'; @Component({ selector: 'hero', template: html, styles: [css], }) export class HeroComponent implements { }