AngularJS 2 styleUrls: cosa succede con la concatenazione?

Question

L'applicazione AngularJS 2 dispone di diversi file di stile che concatenato con un'attività gulp. Va bene, dato che finiranno in un grosso file che invierò al browser in produzione. La mia domanda riguarda Angular 2 @Component e il suo attributo styleUrls.

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

    inputs: ['hero'] 
}) 

Grazie alla ombra DOM di emulazione in modalità predefinita (emulato) gli stili definiti nel hero/hero.component.css vengono applicate solo alla componente proprio come voglio. La mia domanda è, cosa succede con la concatenazione? Non riesco a raggruppare tutti i file CSS specificati nel multiplo di styleUrls poiché avremmo annullato lo scopo dell'incapsulamento: gli stili per un componente avrebbero perso l'intero documento. Tuttavia, non voglio né effettuare una chiamata in produzione per ogni file CSS di cui un componente ha bisogno. Come posso concatenare quegli stili (e possibilmente ridurli) in modo che il client li riceva tutti in un'unica chiamata e conservi ancora l'incapsulamento?

Answer 1

I file modello e css possono essere raggruppati lungo i file js utilizzando un plugin di sistema js.

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 { 
}