Angular Material 找不到 Angular Material 核心主题

Posted 2023-02-19

【中文标题】Angular Material 找不到 Angular Material 核心主题

【英文标题】：Angular material Could not find Angular Material core theme

【发布时间】：2017-10-29 01:49:13

【问题描述】：

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

material.es5.js:148 找不到 Angular Material 核心主题。大多数 Material 组件可能无法按预期工作。有关更多信息，请参阅主题指南：https://material.angular.io/guide/theming`

材料组件不工作。 怎么了？

【问题讨论】：

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

我没有任何 sass 文件

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

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

【参考方案1】：

请将以下代码插入到您的 styles.css 中，该文件位于您的 src 文件夹中。

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

您可以选择prebuilt-themes文件夹下的任何css。

【讨论】：

正如@jelbourn 在问题4739 中提到的那样：在Global (styles.css) 中而不是在组件的styleUrls 中加载预建主题.

使用 ~ 获得更简单的节点模块路径。示例：@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

正如@BraveNinja 所说，波浪号“~”可让您避免路径问题。请参阅***.com/a/39535907/877464 以获得更好的解释。

为什么这不是由 angular add @angular/material 本身处理的？

@Trevor 链接已损坏，该段不再存在

【参考方案2】：

我通过以下步骤完成了它：

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 文件中的 @angular/material 导入的

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

【讨论】：

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

不工作，因为 node_modules\@angular\material_theming.scss 被覆盖

【参考方案3】：

如果在使用 Karma 进行测试期间发生这种情况，请将以下 pattern 添加到您的 karma.config.js 文件中的 files 列表中。

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

更多详情请看这里：https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

【参考方案4】：

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

【参考方案5】：

添加：

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

致您的style.css

【参考方案6】：

除了上面提到的@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 视觉工作室模板的 Angular Material 设置。请找到详细记录的设置说明详细信息here。

【参考方案7】：

为我在 index.html 的 css 部分添加工作

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

这里提到here

【参考方案8】：

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

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

对我来说很好用

【讨论】：

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

@Bluex 为什么这样更好？

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

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

最新的文档需要这种方法...material.angular.io/guide/theming#using-a-pre-built-theme

【参考方案9】：

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

【参考方案10】：

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

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

【参考方案11】：

将以下行添加到您的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';

【讨论】：

不工作，因为 node_modules\@angular\material_theming.scss 被覆盖

【参考方案12】：

添加@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

如果您想阅读，可以访问：Theming your Angular Material app

【参考方案13】：

我遇到了和你一样的错误，我在其中一个 cmets 中找到了解决方案。由于该解决方案对我有用，因此我想将其发布为答案。

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

【参考方案14】：

添加

@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 文件的头部

【参考方案15】：

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

【参考方案16】：

Material design modules包含scss，将css文件迁移到scss分以下两步：

npm i diagrams-scss-migrate ng g diagrams-scss-migrate:scss-migrate

希望这对每个人都有效:)