it-swarm.com.de

Winkelmaterial Das Kernthema Winkelmaterial konnte nicht gefunden werden

In meinem Angular2-Projekt installiere ich das neueste Material-Plugin aus https://material.angular.io/guide/getting-started . Als nächstes füge ich @import '[email protected]/material/prebuilt-themes/deeppurple-amber.css'; meiner CSS-Datei für meine Komponente hinzu. In meiner Konsole zeigt Angular diesen Fehler:

material.es5.js: 148 Angular Material-Kernthema konnte nicht gefunden werden. Die meisten Materialkomponenten funktionieren möglicherweise nicht wie erwartet. Weitere Informationen finden Sie im Themenhandbuch: https://material.angular.io/guide/theming

Die Materialkomponenten funktionieren nicht .. Was ist falsch? 

45
lukassz

Bitte fügen Sie den folgenden Code in Ihre style.css ein, die sich in Ihrem src - Ordner befindet.

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

Sie können eine beliebige CSS unter dem Ordner prebuilt-themes auswählen.

95
codelovesme

Ich habe es mit den folgenden Schritten gemacht:

1) Importieren Sie dieses (oder andere) Materialdesign in Ihre css-Hauptdatei:

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

2) Stellen Sie außerdem sicher, dass Sie diese css-Hauptdatei mit der Datei app.component registrieren

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

3) Vergewissern Sie sich, dass die benötigten Komponenten aus @ angle/material in Ihre app.module -Datei importiert werden

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

geben Sie diesen Code in Ihre Datei angle-cli.json ein

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

es funktioniert gut für mich

6

Wenn Sie Angular-CLI verwenden, müssen Sie einen Verweis auf die Themendatei erstellen, z. "candy.scss" in der .angular-cli.json-Datei. Schauen Sie genau hin, haben Sie eine * .scss? Es ist eine Sass-Datei. Informationen hierzu finden Sie hier: Winkelmaterial 2 Anleitungen zum Thema . Fügen Sie in .angular-cli.json unter der styles-Eigenschaft neben den "themes/styles.css" "themes/candy.scss" hinzu. Ich habe in meinen Projekten einen Ordner namens "Themes". Ich stelle die styles.css und die candy.scss in den Themes Ordner. Jetzt kann Angular-CLI Ihr Thema finden.

3
LargeDachshund

Wenn dies während des Testens mit Karma geschieht, fügen Sie der Liste pattern in Ihrer karma.config.js-Datei die folgende files hinzu.

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

Weitere Informationen finden Sie hier: https://www.bountysource.com/issues/44073085-testing-mit-material-components-guide-to-demonstrating-inclosing-core-theme-in-test-suite

2
The Aelfinn

Fügen Sie die folgende Zeile zu Ihrem src/styles.css hinzu

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

Sie können auch andere CSS-Klassen ausprobieren. Hier sind die verfügbaren Klassen:

@import '[email protected]/material/prebuilt-themes/Indigo-pink.css';

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

@import '[email protected]/material/prebuilt-themes/pink-bluegrey.css';

@import '[email protected]/material/prebuilt-themes/purple-green.css';

2
nPcomp

Fügen Sie @import "[email protected]/material/prebuilt-themes/Indigo-pink.css" in style.css hinzu

2
Pulkeet Katiyar

Zusätzlich zu @import-Anweisungen wie oben erwähnt. Stellen Sie sicher, dass Sie Encapsulation hinzufügen: ViewEncapsulation.None im @Component-Dekorator.

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

Wenn Sie nach Angular Material-Setup für die .Net Core 1.1 oder 2.0 Angular SPA Visual Studio-Vorlage suchen. Die gut dokumentierten Installationsanweisungen finden Sie hier .

2

Wenn Sie nur die Materialsymbole benötigen und nicht das gesamte Material css importieren möchten, verwenden Sie dies in Ihrer Root-css:

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

Überprüfen Sie alle anderen @imports in Ihrer CSS- oder SCSS-Datei. Ich habe dieses Problem erfahren und konnte es nicht beheben, bis andere Importe entfernt wurden.

0
BenSimpsy

Add @ import "[email protected]/material/prebuilt-themes/Indigo-pink.css" ; zu style.css Ihres angular Projekts.

Wenn Sie ein anderes Thema möchten, folgen Sie einfach den Schritten: Knotenmodule -> @angular -> Material -> vorgefertigte Themen ->

i) Deeppurple-Amber : @ import "[email protected]/material/prebuilt-themes/deeppurple-amber.css

ii) Indigopink : @ import "[email protected]/material/prebuilt-themes/Indigo-pink.css

iii) rosa-blaugrau : @ import "[email protected]/material/prebuilt-themes/pink-bluegrey.css

iv) lila-grün : @ import "[email protected]/material/prebuilt-themes/purple-green.css

Und wenn du lesen möchtest, kannst du besuchen: Theming your Angular Material app

0
octogenex

arbeitete für mich in css Abschnitt von index.html 

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

Wie hier erwähnt hier

0
naila naseem