not - styleurls angular 4
styleUrls no funciona en Angular 2 (8)
Acabo de tener el mismo problema con el tutorial de Heroes. El móduloId solucionó el problema:
@Component({
moduleId: module.id, // this is the key
selector: ''my-dashboard'',
templateUrl: ''dashboard.component.html'',
styleUrls: [''dashboard.component.css'']
})
Sin el módulo, solo los estilos en línea y la plantilla funcionan.
Estoy usando Angular 2 con SystemJS e intento agregar una hoja de estilo a un componente.
Ya que 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 ve algo como 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
Intenté implementar styleUrls: en el ejemplo de plunker. Funcionó para mí.
Utilicé lo siguiente:
@Component({
moduleId: module.id,
selector: ''app-root'',
templateUrl: ''app.component.html'',
styleUrls: [''app-root.style.css'']
})
Busque el archivo app.component.ts y app-root.style.css
Las rutas relativas al archivo actual con el ID de módulo de la solución de @boskicthebrain funcionaron para mí.
Sin embargo, ya que estoy en el paquete web , los archivos css en este caso deben cargarse con el cargador sin formato (en lugar de la combinación cargador de estilo / cargador de css, ya que el cargador de estilo no es para AOT del lado del servidor) y dejarlo angular. hacer su trabajo
Al final, dado que el operador ::ng-deep está en desuso y los estilos tienen un alcance muy restrictivo, lo dejé todo y fui con una importación simple import ''./my-component.component.css''; en la parte superior del archivo .component.ts . Esto tiene la ventaja de que se carga con el componente y también es un CSS global .
Los documentos de Angular 2 dicen que SystemJS expone la variable __moduleName requerida para nombres relativos, como module.id para CommonJS ... ¿Lo has intentado?
declare var __moduleName: any;
@Component({
moduleId: __moduleName,
selector: ''dashboard'',
templateUrl: ''dashboard.html'',
styleUrls: [''dashboard.css'']
})
Si está utilizando PrimeNG o material angular en su proyecto, styleUrl no funcionará de esta manera. Debe importar ViewEncapsulation y colocar 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'']
})
Solo necesitas eliminar la barra diagonal desde el principio de la ruta de styleUrls de esta manera:
@Component({
selector: ''dashboard'',
templateUrl: ''/app/components/dashboard/dashboard.html'',
styleUrls: [''app/components/dashboard/dashboard.css'']
})
la url del estilo se ve bien siempre que el index.html esté en la carpeta de la aplicación anterior.
También en el marcado html, la clase debe configurarse según lo que desea en los estilos.
para esto, no es necesario que elimines ninguna barra inclinada o cualquier otra cosa, en realidad yo también estaba cometiendo este error y la página html no estaba enlazando con el archivo css.
En realidad estaba cometiendo un error tonto: la página html como:
<img src="../../assets/images/logo.png" alt="LOGO" class="responsive-img login-logo-width">
archivo css como:
login-logo-width {
width: 260px;
}
Error que estaba obteniendo como: Esta inspección detecta selectores de CSS desconocidos y proporciona la capacidad de declararlos como una clase o una identificación
Entonces, el htiong que tiene que hacer es: defina el parámetro a id o class lo que haya declarado en el archivo html como:
.login-logo-width {
width: 260px;
}