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?
Antworten:
Bitte fügen Sie den folgenden Code in Ihre style.css ein, die sich in Ihrem src- Ordner befindet.
Sie können jedes CSS im Ordner für vorgefertigte Themen auswählen .
quelle
Ich habe es mit den folgenden Schritten zum Laufen gebracht:
1) Importieren Sie dieses (oder ein anderes) Materialthema in Ihre Haupt-CSS-Datei:
2) Stellen Sie außerdem sicher, dass Sie diese CSS-Hauptdatei in der Datei app.component registrieren
3) Überprüfen Sie, ob die benötigten Komponenten aus @ angle / material in Ihrer app.module- Datei importiert wurden
quelle
Fügen Sie diesen Code in Ihre Datei angle-cli.json ein
es funktioniert gut für mich
quelle
ng add @angular/material
auftritt, beenden Sie einfach den Stapeljob und führen Sie die App erneut aus. Manchmal werden die Konfigurationen beim Kompilieren nicht vollständig geladen.Wenn dies während des Testens mit Karma geschieht, fügen Sie
pattern
derfiles
Liste in Ihrerkarma.config.js
Datei Folgendes hinzu .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
quelle
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.
quelle
Hinzufügen:
@import "~@angular/material/prebuilt-themes/indigo-pink.css"
zu deinem
style.css
quelle
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';
quelle
Zusätzlich zu den oben erwähnten @ import-Anweisungen. Stellen Sie sicher, dass Sie die Kapselung hinzufügen: ViewEncapsulation.None in @Component Decorator.
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 .
quelle
Wenn Sie nur die Materialsymbole benötigen und nicht das gesamte Material-CSS importieren möchten, verwenden Sie dies in Ihrem Root-CSS:
quelle
arbeitete für mich das Hinzufügen im CSS-Abschnitt von index.html
Wie hier hier erwähnt
quelle
Ü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.
quelle
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
quelle
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.
quelle
Hinzufügen
zur Datei style.css ODER hinzufügen
im Kopfbereich der Datei index.html
quelle
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.
quelle