角材料找不到角材料核心主题

78

在我的Angular2项目中，我从https://material.angular.io/guide/getting-started安装了最新的材质插件。接下来，将@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';我的组件添加到我的css文件中。但是在我的控制台中，Angular显示了此错误：

material.es5.js：148找不到Angular Material核心主题。大多数材料组件可能无法正常工作。欲了解更多信息请参阅主题化指南：https://material.angular.io/guide/theming `

材料组件不起作用。怎么了？

angular themes

— 卢卡斯
source

如果我没记错的话，这个文件是SASS文件（.scss），也许您可以尝试一下？

我没有任何sass文件

— -lukaszz

不，您没有sass文件，但是角度材质模块有。这就是您使用自己的主题的方式（同样，如果我没记错的话），因此请尝试在节点模块中查看它是SASS还是CSS文件。

3

如果您正在处理自定义主题项目，并且已将文件添加到“ angular.json”文件中，请确保停止ng服务并重新启动它以加载新的“ theme.scss”。

— 乔纳森

165

请在您的src文件夹中的style.css中插入以下代码。

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

您可以在prebuilt-themes文件夹下选择任何CSS 。

— codelovesme
source

2

就像@jelbourn在问题4739中提到的那样：在Global （styles.css）中而不是在Component的styleUrls中加载预构建主题。

— btpka3

15

使用〜可简化到节点模块的路径。示例：@import'~@angular/material/prebuilt-themes/deeppurple-amber.css';

— BraveNinja

正如@BraveNinja所说，代字号“〜”可以避免路径问题。有关原因的详细说明，请参见stackoverflow.com/a/39535907/877464。

— caruso_g

为什么不能通过angular add @ angular / material本身来处理呢？

— JFFIGK '18 -10-21

1

@Trevor链接已断开，该段不再存在

— Kirill

19

我按照以下步骤进行操作：

1）将此（或其他）Material主题导入到您的主要css文件中：

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

2）还要确保将这个主CSS文件注册到app.component文件中

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

3）仔细检查你所需要的组件从进口@角/材料在app.module文件

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

— cmcevoy
source

它节省了我的时间。谢谢。

— ArunDhwaj IIITH

由于node_modules \ @angular \ material_theming.scss被覆盖而无法工作

— Yasar Arafath

18

将该代码放入您的angular-cli.json文件中

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

对我来说很好

— 穆罕默德·泽山
source

3

这是真正的正确答案。切勿使用style.css导入其他CSS。始终使用angular.json文件。

— Bluex

@Bluex为什么会更好？

— 罗科

@Rocco，因为它就像内联样式css ..它可以工作，但不是一个好的解决方案，而是最糟糕的

— Bluex

这是最好的答案。如果您在运行9+以后的版本时遇到此错误，ng add @angular/material 只需终止批处理作业并重新运行应用程序，有时编译时就不会完全加载配置。

— 西奥多

4

如果在使用Karma测试期间发生这种情况，请将以下内容添加pattern到文件中的files列表中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}
    ],
    ...
}

— 艾尔芬
source

3

如果使用Angular-CLI，则需要引用主题文件，例如.angular-cli.json文件中的“ candy.scss”。仔细看看，您有一个* .scss吗？这是一个Sass文件。在此处查找信息：角度材料2主题说明。因此，在.angular-cli.json中的styles属性下，在“ themes / styles.css”旁边添加“ themes / candy.scss”。我的项目中有一个名为“主题”的文件夹。我将styles.css和candy.scss放在主题文件夹中。现在，Angular-CLI可以找到您的主题。

— 大腊肠犬
source

3

加：

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

给你 style.css

— Pulkeet Katiyar
source

3

将以下行添加到您的 src/styles.css

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

您也可以尝试其他Css类。以下是可用的类：

@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
source

由于node_modules \ @angular \ material_theming.scss被覆盖而无法工作

— Yasar Arafath

2

除了上面提到的@import语句。请确保添加封装：@Component装饰器内没有ViewEncapsulation.None。

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

如果您正在寻找.Net core 1.1或2.0 Angular SPA visual studio模板的Angular Material设置。请在此处找到详细记录的安装说明详细信息。

— 文卡特什·穆尼扬迪（Venkatesh Muniyandi）
source

1

如果只需要材质图标，并且不想导入整个材质css，请在根css中使用它：

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

— 维泰利
source

0

为我工作，添加了index.html的CSS部分

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

这里提到这里

— 美甲娜西姆
source

0

检查您的css或scss文件中的任何其他@imports。我遇到了这个问题，直到其他导入被删除后，我才能解决。

— 本辛普西
source

0

添加@import“ ~@angular/material/prebuilt-themes/indigo-pink.css”；到您的角度项目的style.css。

如果您想要任何其他主题，请按照以下步骤操作： 节点模块-> @angular->材质->预建主题->

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）紫色-绿色：@import“ ~@angular/material/prebuilt-themes/purple-green.css

如果您想阅读，可以访问：主题化Angular Material应用

— octogenex
source

0

我遇到了与您相同的错误，并且在其中一项评论中找到了解决方案。由于该解决方案对我有用，因此我想将其发布为答案。

如果您的项目已经在运行，并且随后安装了材料组件，则需要先重新启动项目。仅此一项就可以解决。

0

加

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

到style.css文件，或添加

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

在index.html文件的头部

— Vishnu Mehta
source

0

我不知道有多少人会觉得这很有用，但是尝试了Stack Stack的不同解决方案后，重新启动ng服务器的方法起作用了。

— 莫汉
source