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

Question

我对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": "*"

如何修复此错误？

- Alex

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">

如主题文档中所述，Angular Material提供以下预构建主题:

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

您必须包含其中一个主题，或者创建自定义主题。

- Philipp Kief

Answer 2

将@import添加到styles.css中对我无效，将主题添加到angular.json中解决了问题。

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

您可以直接在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"
],

- Masoud Bimmar

Answer 3

当我从Angular 7升级到8版本时，遇到了同样的问题。即使已经将其导入到.sass文件/index.html/angular.json文件中，问题仍然存在。我尝试单独升级Angular Material，问题得到了解决。

ng update @angular/material@latest

- Srividhya Seshadri

Answer 4

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

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

您可以在预构建主题文件夹下选择任何CSS。

- himanshu sharma