Angular Material Das Kernthema Angular Material konnte nicht gefunden werden

78

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?

lukassz
quelle
Wenn ich mich richtig erinnere, ist diese Datei eine SASS-Datei (.scss). Vielleicht können Sie es damit versuchen?
Ich habe keine Sass-Datei
Lukassz
Nein, Sie haben keine Sass-Dateien, aber das Winkelmaterialmodul. Auf diese Weise verwenden Sie Ihr eigenes Thema (wieder, wenn ich mich richtig erinnere). Versuchen Sie also, im Knotenmodul zu sehen, ob es sich um eine SASS- oder CSS-Datei handelt.
3
Wenn Sie an einem benutzerdefinierten Themenprojekt arbeiten und Ihrer "angle.json" -Datei eine Datei hinzugefügt haben, stellen Sie sicher, dass Sie den ng-Dienst beenden und neu starten, damit die neue "theme.scss" geladen wird.
Jonathan

Antworten:

165

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 .

codelovesme
quelle
2
Genau wie @jelbourn in Ausgabe 4739 erwähnt : Laden Sie vorgefertigte Themen in Global (styles.css) und nicht in den styleUrls von Component .
Btpka3
15
Verwenden Sie ~ für einen einfacheren Pfad zu Knotenmodulen. Beispiel: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
BraveNinja
Wie @BraveNinja sagte, können Sie mit Tilde "~" Probleme mit Pfaden vermeiden. Eine bessere Erklärung finden Sie unter stackoverflow.com/a/39535907/877464 .
caruso_g
Warum wird dies nicht von Angular Add @ Angular / Material selbst behandelt?
JFFIGK
1
@ Trevor der Link ist gebrochen, dieser Absatz ist nicht mehr da
Kirill G.
19

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';
cmcevoy
quelle
Das hat mir Zeit gespart. Vielen Dank.
ArunDhwaj IIITH
funktioniert nicht, weil node_modules \ @angular \ material_theming.scss überschreibt
Yasar Arafath
18

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

Mohammad Zeeshan
quelle
3
Dies ist die wirklich richtige Antwort. Verwenden Sie style.css niemals zum Importieren anderer CSS. Verwenden Sie IMMER die Datei angle.json.
Bluex
@Bluex warum ist das besser?
Rocco
@Rocco, weil es wie Stil CSS Inline ist .. es funktioniert, aber keine gute Lösung ist, sondern die schlechteste
Bluex
Dies ist die beste Antwort. Wenn dieser Fehler bei späteren Versionen 9+ nach dem Ausführen 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.
Theodore
4

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

Der Aelfinn
quelle
3

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.

Großer Dackel
quelle
3

Hinzufügen:

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

zu deinem style.css

Pulkeet Katiyar
quelle
3

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

nPcomp
quelle
funktioniert nicht, weil node_modules \ @angular \ material_theming.scss überschreibt
Yasar Arafath
2

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 .

Venkatesh Muniyandi
quelle
1

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;
}
G. Vitelli
quelle
0

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

naila naseem
quelle
0

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

BenSimpsy
quelle
0

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

Octogenex
quelle
0

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
0

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

Vishnu Mehta
quelle
0

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.

Mohan
quelle