如何修复 Angular 2 中的错误“找不到 Angular Material 核心主题”？

Question

我几乎是 Angular2 的新手，继承了 Angular2 前端的项目。在控制台上切换到新的 Angular 4.0 后，我看到错误：

"compatibility.ts:221 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming"

mdb.min.css 在 app/assets/css 文件夹中。 package.json 中的规范显示如下：

"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
...
"angular-bootstrap-md": "*"

如何修复错误？

Answer 1

您必须将主题导入全局 css 或 sass 文件：

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

或者将其包含在您的 index.html 文件中：

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

正如在 theming documentation 中已经提到的 Angular Material 提供了以下预建主题：

深紫色-amber.css
靛蓝-pink.css
粉色-bluegrey.css
紫色-green.css

您必须包含这些主题之一，或者创建您自己的自定义主题。

Answer 2

将@import 添加到 styles.css 对我不起作用，将主题添加到 angular.json 就成功了

您可以使用以下方法将默认 angular-material-theme 替换为 above-mentioned angular-material-theme 之一。

您可以直接在 styles.css 文件中包含 pre-built angular-material-theme。

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

或在 index.html 文件的 head 标签内添加以下内容。

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

或更新 angular.json 文件中的以下内容。

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

Answer 3

导入到 .sass 文件 / index.html / angular.json [= 后，我从 Angular 版本 7 升级到 8.Even 16=] 再次尝试单独升级 angular material ，问题解决了。

ng update @angular/material@latest

Answer 4

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

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

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

如何修复 Angular 2 中的错误“找不到 Angular Material 核心主题”？

How to fix the error “Could not find Angular Material core theme” in Angular 2?

css

angular-material2

angular