0
476
ViewsstyleUrls no funciona en Angular 2
Estoy usando Angular 2 con SystemJS e intento agregar una hoja de estilo a un componente.
Como estoy usando SystemJS, no puedo usar la ruta relativa a partir de ahora, así que usé la ruta absoluta para la URL de la plantilla del componente y también la URL del estilo.
Sin embargo, el estilo en línea funciona bien (es decir styles: ['h1 {font-size: 12px; }'] )
El componente se parece a esto:
@Component({ selector: 'dashboard', templateUrl: '/app/components/dashboard/dashboard.html', styleUrls: ['/app/components/dashboard/dashboard.css'] }) La hoja de estilo dashboard.css nunca se carga (ni devuelve ningún error).
Versiones de las herramientas:
~ angular 2: 2.0.0-beta.6
~ systemjs: 0.19.20
~ typescript: 1.8.0
3 answers
Answer question0
Solo necesita eliminar la barra inclinada desde el principio de la ruta styleUrls de esta manera:
@Component({ selector: 'dashboard', templateUrl: '/app/components/dashboard/dashboard.html', styleUrls: ['app/components/dashboard/dashboard.css'] })0
Si está utilizando PrimeNG o Angular Material en su proyecto, styleUrl no funcionará así. Debe importar ViewEncapsulation y poner encapsulation: ViewEncapsulation.None en la definición de @component.
import { Component, Output, Input, ViewEncapsulation} from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None, selector: 'message-center', templateUrl: './messagecenter.component.html', styleUrls: ['./messagecenter.component.css'] })0
Los documentos de Angular 2 dicen que SystemJS expone la variable __moduleName requerida para nombres relativos al igual que module.id para CommonJS ... ¿Lo has probado?
declare var __moduleName: any; @Component({ moduleId: __moduleName, selector: 'dashboard', templateUrl: 'dashboard.html', styleUrls: ['dashboard.css'] })