Material angular no se pudo encontrar el tema principal de material angular

80

En mi proyecto Angular2, instalo el último complemento de material de https://material.angular.io/guide/getting-started . Luego agrego @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';a mi archivo css para mi componente. Pero en mi consola Angular muestra este error:

material.es5.js: 148 No se pudo encontrar el tema principal de Angular Material. Es posible que la mayoría de los componentes del material no funcionen como se esperaba. Para obtener más información, consulte la guía de temas: https://material.angular.io/guide/theming `

Los componentes del material no funcionan. Que esta mal

lukassz
fuente
Si mal no recuerdo, este archivo es un archivo SASS (.scss), ¿quizás puedas probar con eso?
No tengo ningún archivo sass
lukassz
No, no tiene archivos sass, pero el módulo de material angular sí. Así es como usa su propio tema (nuevamente, si recuerdo bien), así que intente ver en el módulo de nodo si es un archivo SASS o css.
3
Si está trabajando en un proyecto de temática personalizada y agregó un archivo a su archivo "angular.json", asegúrese de detener el servicio ng y reiniciarlo para que se cargue el nuevo "theme.scss".
Jonathan

Respuestas:

168

Inserte el siguiente código en su style.css que se encuentra en su carpeta src .

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Puede seleccionar cualquier CSS en la carpeta de temas precompilados.

codelovesme
fuente
2
Tal como @jelbourn mencionó en Issues 4739 : Cargue temas precompilados en Global (styles.css), en lugar de en las styleUrls de Component .
btpka3
15
Utilice ~ para una ruta más fácil a los módulos de nodo. Ejemplo: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
BraveNinja
Como dijo @BraveNinja, tilde "~" te permite evitar problemas con las rutas. Consulte stackoverflow.com/a/39535907/877464 para obtener una mejor explicación del motivo.
caruso_g
¿Por qué esto no se maneja con angular add @ angular / material en sí?
JFFIGK
1
@Trevor, el enlace se ha roto, ese párrafo ya no está allí
Kirill G.
19

Lo hice funcionar con los siguientes pasos:

1) Importe este (u otro) tema de material a su archivo css principal:

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2) También asegúrese de registrar este archivo CSS principal con el archivo app.component

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3) Verifique que los componentes que necesita se hayan importado de @ angular / material en su archivo app.module

import { MdCardModule, MdInputModule } from '@angular/material';
cmcevoy
fuente
Me salvó el tiempo. Gracias.
ArunDhwaj IIITH
no funciona porque node_modules \ @angular \ material_theming.scss está anulando
Yasar Arafath
18

ponga ese código en su archivo angular-cli.json

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

funciona bien para mi

Mohammad Zeeshan
fuente
3
Esta es la verdadera respuesta correcta. Nunca use style.css para importar otros css. SIEMPRE use el archivo angular.json.
Sum_Pie
@Bluex, ¿por qué es mejor?
Rocco
@Rocco porque es como el estilo CSS en línea ... funciona pero no es una buena solución sino la peor
Sum_Pie
Esta es la mejor respuesta. Si obtiene este error con las versiones posteriores 9+ después de ejecutar, ng add @angular/material simplemente finalice el trabajo por lotes y vuelva a ejecutar la aplicación, a veces las configuraciones no se cargan por completo al compilar.
Theodore
4

Si esto sucede durante la prueba con Karma, agregue lo siguiente patterna la fileslista en su karma.config.jsarchivo.

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

Para obtener más detalles, consulte aquí: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

El Aelfinn
fuente
3

Si está utilizando Angular-CLI, deberá hacer una referencia al archivo de temas, por ejemplo, "candy.scss" en el archivo .angular-cli.json. Mire de cerca, ¿tiene un * .scss? Es un archivo de Sass. Busque aquí para obtener información: Instrucciones de temática de Angular Material 2 . Entonces, en .angular-cli.json, bajo la propiedad styles, agregue "themes / candy.scss", al lado de "themes / styles.css". Tengo una carpeta en mis proyectos llamada "temas". Pongo styles.css y candy.scss en la carpeta de temas. Ahora, Angular-CLI puede encontrar su tema.

LargeDachshund
fuente
3

Añadir:

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

para usted style.css

Pulkeet Katiyar
fuente
3

Agregue la siguiente línea a su src/styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

También puedes probar otras clases de Css. Aquí están las clases disponibles:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

nPcomp
fuente
no funciona porque node_modules \ @angular \ material_theming.scss está anulando
Yasar Arafath
2

Además de las declaraciones @import como se mencionó anteriormente. Asegúrese de agregar encapsulación: ViewEncapsulation.None dentro del decorador @Component.

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

Si está buscando una configuración de material angular para la plantilla de estudio visual de .Net core 1.1 o 2.0 Angular SPA. Encuentre los detalles de las instrucciones de configuración bien documentados aquí .

Venkatesh Muniyandi
fuente
1

Si solo necesita los íconos de material y no desea importar todo el material css, use esto, en su css raíz:

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}
G.Vitelli
fuente
0

funcionó para mí agregando en la sección css de index.html

 <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Como se menciona aquí aquí

naila naseem
fuente
0

Verifique cualquier otra @importación en su archivo css o scss. Experimenté este problema y no pude resolverlo hasta que se hayan eliminado otras importaciones.

BenSimpsy
fuente
0

Agregue @import "~@angular/material/prebuilt-themes/indigo-pink.css" ; a style.css de su proyecto angular.

En caso de que desee cualquier otro tema, siga los pasos: Módulos de nodo -> @angular -> material -> temas precompilados ->

i) deep-amber : @import "~@angular/material/prebuilt-themes/deeppurple-amber.css

ii) rosa índigo : @import "~@angular/material/prebuilt-themes/indigo-pink.css

iii) rosa-azul-gris : @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

iv) púrpura-verde : @import "~@angular/material/prebuilt-themes/purple-green.css

Y si quieres leer puedes visitar : Tematización de tu aplicación Angular Material

octogenex
fuente
0

Tuve el mismo error que tú y encontré la solución en uno de los comentarios. Dado que esa solución funcionó para mí, quiero publicarla como respuesta.

Si su proyecto ya se estaba ejecutando y luego instaló sus componentes de material, primero debe reiniciar su proyecto. Eso solo ya puede ser la solución.


fuente
0

Añadir

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'

al archivo style.css , O agregue

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

en la sección de cabecera del archivo index.html

Vishnu Mehta
fuente
0

No sé cuántos pueden encontrar esto útil, pero reiniciar el servidor ng funcionó después de probar diferentes soluciones de Stack overflow.

Deepak
fuente