angular - servidor - ng build

Material angular No se pudo encontrar el tema principal del material angular

Question

En mi proyecto Angular2, instalo el último complemento de 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 principal del material angular. 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 funcionan. Que pasa

Answer 1

Añadir:

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

a tu style.css

Answer 2

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

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

Si está buscando la configuración de material angular para .Net core 1.1 o 2.0 Angular SPA visual studio template. Encuentre los detalles de instrucciones de configuración bien documentados here .

Answer 3

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

En caso de que desee algún otro tema, siga los pasos: Módulos de nodo -> @angular -> material -> temas preconstruidos ->

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

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

iii) pink-bluegrey : @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 : https://material.angular.io/guide/theming

Answer 4

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

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

Puedes probar otras clases de CSS también. 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'';

Answer 5

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

Answer 6

Lo conseguí trabajando con los siguientes pasos:

1) Importe este (u otro) tema Material en 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 importen de @ angular / material en su archivo app.module

import { MdCardModule, MdInputModule } from ''@angular/material'';

Answer 7

Si está utilizando Angular-CLI, deberá hacer una referencia al archivo de temas, por ejemplo, "candy.scss" en el archivo .angular-cli.json. Mira de cerca, ¿tienes un * .scss? Es un archivo Sass. Mire aquí para obtener información: https://material.angular.io/guide/theming . Entonces, en .angular-cli.json, debajo de la propiedad styles, agregue "themes / candy.scss", junto a "themes / styles.css". Tengo una carpeta en mis proyectos llamada "temas". Puse el styles.css y el candy.scss en la carpeta de temas. Ahora, Angular-CLI puede encontrar su tema.

Answer 8

Si esto sucede durante las pruebas con Karma, agregue el siguiente pattern a la lista de 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 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

Answer 9

Si solo necesita los iconos 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;
}

Answer 10

Verifique cualquier otra @imports en su archivo css o scss. Experimenté este problema y no pude resolverlo hasta que se eliminaron otras importaciones.

Answer 11

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í https://material.angular.io/guide/theming

Answer 12

pon ese código en tu archivo angular-cli.json

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

funciona bien para mi