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

【问题标题】：How to fix the error “Could not find Angular Material core theme” in Angular 2?如何修复 Angular 2 中的“找不到 Angular Material 核心主题”错误？
【发布时间】：2019-09-08 14:17:14
【问题描述】：

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

“compatibility.ts:221 找不到 Angular Material 核心主题。大多数 Material 组件可能无法按预期工作。有关更多信息，请参阅主题指南：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": "*"

如何修复错误？

【问题讨论】：

标签： css angular angular-material2

【解决方案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 提供了以下预建主题：

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.css

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

【讨论】：

对我来说，在添加 inndex.html 或 styles.css 后它不起作用

【解决方案2】：

将@import 添加到styles.css 对我不起作用，将主题添加到angular.json 可以解决问题

您可以使用以下方式将默认的 angular-material-theme 替换为上述 angular-material-themes 之一。

您可以直接在styles.css文件中包含预先构建的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"
],

【讨论】：

【解决方案3】：

当我从 Angular 版本 7 升级到 8 时遇到了同样的问题。即使在导入到 .sass 文件/index.html/angular.json 文件之后。我尝试再次单独升级 angular 材料，它解决了问题。

更新@angular/material@latest

【讨论】：

【解决方案4】：

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

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

你可以选择prebuilt-themes文件夹下的任意css。

【讨论】：