Angular Material Das Kernthema Angular Material konnte nicht gefunden werden

In meinem Angular2-Projekt installiere ich das neueste Material-Plugin von https://material.angular.io/guide/getting-started . Als nächstes füge ich @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';meiner CSS-Datei für meine Komponente hinzu. Aber 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 los?

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 jedes CSS im Ordner für vorgefertigte Themen auswählen .

Ich habe es mit den folgenden Schritten zum Laufen gebracht:

1) Importieren Sie dieses (oder ein anderes) Materialthema in Ihre Haupt-CSS-Datei:

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

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

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

3) Überprüfen Sie, ob die benötigten Komponenten aus @ angle / material in Ihrer app.module- Datei importiert wurden

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

Fügen 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

Wenn dies während des Testens mit Karma geschieht, fügen Sie patternder filesListe in Ihrer karma.config.jsDatei Folgendes 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-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

Wenn Sie Angular-CLI verwenden, müssen Sie auf die Themendatei verweisen, z. B. "candy.scss" in der Datei .angular-cli.json. Schauen Sie genau hin, haben Sie eine * .scss? Es ist eine Sass-Datei. Informationen finden Sie hier: Angular Material 2 Theming-Anweisungen . Fügen Sie also in der Datei .angular-cli.json unter der Eigenschaft styles neben dem Thema "theme / styles.css" "themes / sweet.scss" hinzu. Ich habe in meinen Projekten einen Ordner namens "Themen". Ich habe die styles.css und die cand.scss in den Themenordner gelegt. Jetzt kann Angular-CLI Ihr Thema finden.

Hinzufügen:

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

zu deinem style.css

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

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

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

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

Zusätzlich zu den oben erwähnten @ import-Anweisungen. Stellen Sie sicher, dass Sie die Kapselung hinzufügen: ViewEncapsulation.None in @Component Decorator.

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

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

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

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

arbeitete für mich das Hinzufügen im CSS-Abschnitt von index.html

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

Wie hier hier erwähnt

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

Fügen Sie @import "~@angular/material/prebuilt-themes/indigo-pink.css" hinzu ; zu style.css Ihres eckigen Projekts.

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

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

ii) Indigo-pink : @import „~@angular/material/prebuilt-themes/indigo-pink.css

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

iv) lila-grün : @import "~@angular/material/prebuilt-themes/purple-green.css

Und wenn Sie lesen möchten, können Sie besuchen : Theming Ihrer Angular Material App

Ich hatte den gleichen Fehler wie Sie und fand die Lösung in einem der Kommentare. Da diese Lösung für mich funktioniert hat, möchte ich sie als Antwort veröffentlichen.

Wenn Ihr Projekt bereits ausgeführt wurde und Sie anschließend Ihre Materialkomponenten installiert haben, müssen Sie Ihr Projekt zuerst neu starten. Das allein kann schon das Problem sein.

Hinzufügen

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

zur Datei style.css ODER hinzufügen

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

im Kopfbereich der Datei index.html

Ich weiß nicht, wie viele dies nützlich finden, aber der Neustart von ng server hat funktioniert, nachdem verschiedene Lösungen aus dem Stapelüberlauf ausprobiert wurden.