Angular material No se pudo encontrar Angular Material core tema


En mi proyecto Angular2 instalo el plugin lastest material desde https://material.angular.io/guide/getting-started . A continuación 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 central de Angular Material. La mayoría de los componentes materiales pueden no funcionar 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 funciona. ¿Qué pasa?

Author: isherwood, 2017-05-28

8 answers

Por favor, inserte el siguiente código en su estilo .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 prebuilt-themes.

 59
Author: codelovesme,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-08 12:55:29

Lo conseguí trabajando con los siguientes pasos:

1) Importa este (u otro) tema Material en tu 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 la aplicación .componente archivo

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

3) Compruebe que los componentes que necesita se importan desde @angular/material en su aplicación .módulo archivo

import { MdCardModule, MdInputModule } from '@angular/material';
 9
Author: cmcevoy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-26 11:00:31

Si esto está sucediendo durante la prueba con Karma, agregue el siguiente pattern a la lista files en su archivo karma.config.js.

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

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

 2
Author: The Aelfinn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-20 23:45:11

Si está utilizando Angular-CLI, necesitará hacer una referencia al archivo themes, por ejemplo, "candy.scss " en el .angular-cli.archivo json. Mira de cerca, ¿tienes un*.¿scss? Es un archivo Sass. Busque aquí información: Material Angular 2 Instrucciones de tematización. Por lo tanto, en el .angular-cli.json, en la propiedad styles, añade " themes / candy.scss", junto a los " temas / estilos.css". Tengo una carpeta en mis proyectos llamada "temas". Puse los estilos.css y los dulces.scss en los temas carpeta. Ahora, Angular-CLI puede encontrar su tema.

 2
Author: LargeDachshund,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-23 22:50:42

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

 2
Author: Pulkeet Katiyar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-14 12:55:20

Además de las declaraciones @import como se mencionó anteriormente. Por favor, asegúrese de añadir encapsulation: ViewEncapsulation.Ninguno dentro de @ Component decorator.

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

Si está buscando la configuración de Angular Material para la plantilla.Net core 1.1 o 2.0 Angular SPA visual studio. Por favor, encuentre los detalles de instrucciones de configuración bien documentados aquí.

 1
Author: Venkatesh Muniyandi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-12 19:38:31

Pon ese código en tu angular-cli.json file

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

Funciona bien para mí

 1
Author: Mohammad Zeeshan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-19 11:17:18

Me funcionó agregar 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í

 0
Author: naila naseem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-20 07:45:47