Chemins relatifs angulaire2. Différents chemins pour template et css

Question

Je suis maintenant avec la dernière version d'angular - 2.0.3. Comment gérer différents chemins. Par exemple, le modèle html est dans le même dossier, le fichier css écrou est dans l'autre.

@Component({  
selector: "order", 
templateUrl: "./app/order/order.template.html", 
styleUrls: ["./app/assets/css/order.css"] 
}) 

Si je taperai module.id alors on trouvera fichier html juste. Toute personne confrontée à un problème quelconque?

Answer 1

Eh bien c'est possible mais pour moi la meilleure pratique est de mettre votre composant CSS dans le composant, il est plus organisé. Cependant,

Il suffit d'ouvrir votre tsconfig.json puis changer

"moduleResolution": "node", 

à

"moduleResolution": "classic", 

alors vous pouvez avoir

structure échantillon

app 
----components 
--------order 
--------------order.component.ts 
--------------order.component.html 
assets 
----order.css 

@Component({ 
    selector: 'selector', 
    templateUrl: './order.component.html', 
    styleUrls:['../../../assets/order.css'] 
}) 

il est te sted avec la version Angular-cli et webpack.

Answer 2

Cette offre permet: http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

J'utilise SystemJS, donc dans mon tsconfig.json, je mets "module": "system". J'ai également ajouté moduleId: __moduleName dans mon @Component. Puis je peux utiliser le chemin relatif pour le modèle et le style. Par exemple:

@Component({ selector: 'datepicker-popup', moduleId: __moduleName, directives: [], providers: [], templateUrl: './datepicker.comp.html', styleUrls: ['./datepicker.css'] })

Answer 3

@Component({ 
selector:'my-app-product', 
moduleId:module.id, 
templateUrl:'product.component.html', 
styleUrls: ['product.component.css'] 

et mettre votre fichier product.component.css dans le même dossier que le fichier html