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

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

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.

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';

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

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

funciona bien para mi

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

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.

Añadir:

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

para usted style.css

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';

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í .

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

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í

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.

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

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.

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

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