Angular Material 找不到 Angular Material 核心主题

关键词：

【中文标题】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

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

【讨论】：

Angular Material 找不到 Angular Material 核心主题

】AngularMaterial找不到AngularMaterial核心主题【英文标题】：AngularmaterialCouldnotfindAngularMaterialcoretheme【发布时间】：2017-10-2901:49:13【问题描述】：在我的Angular2项目中，我从https://material.angular.io/guide/getting-started安装了最新的材料插件... 查看详情

找不到模块'@angular/material-moment-adapter'

】找不到模块\\\'@angular/material-moment-adapter\\\'【英文标题】：Cannotfindmodule\'@angular/material-moment-adapter\'找不到模块\'@angular/material-moment-adapter\'【发布时间】：2018-05-2817:13:55【问题描述】：为什么这不起作用？我尝试导入MomentDateAdapte... 查看详情

SassError：找不到要导入的样式表。 @use '~@angular/material' 作为垫子；

】SassError：找不到要导入的样式表。@use\\\'~@angular/material\\\'作为垫子；【英文标题】：SassError:Can\'tfindstylesheettoimport.@use\'~@angular/material\'asmat;SassError：找不到要导入的样式表。@use\'~@angular/material\'作为垫子；【发布时间】：2021-08-... 查看详情

angular2 找不到名称要求

...02【问题描述】：我想在我的应用程序中使用一个名为ng2-material-select的新组件。将其添加到systemjs.config.jsvarmap=\'Ng2Select\':\'/node_modules/ng2-material-select\',"angular2-jwt" 查看详情

Angular Material Schematics 生成的代码

】AngularMaterialSchematics生成的代码【英文标题】：AngularMaterialSchematicsgeneratedcode【发布时间】：2018-10-2309:54:27【问题描述】：我是Angular的新手，找不到任何东西来解释从nggenerate@angular/material:material-nav生成的这些代码行的确切含义... 查看详情

ng2-material：错误 TS2304：找不到名称“进程”

】ng2-material：错误TS2304：找不到名称“进程”【英文标题】：ng2-material:errorTS2304:Cannotfindname\'process\'【发布时间】：2016-09-1820:57:37【问题描述】：我的项目更新到JustinDuJardin\'sng2-material版本0.3.8（基于Angular2.0.0-beta.14）后，编译失... 查看详情

material-ui：找不到模块：'./AccessAlarm'

】material-ui：找不到模块：\\\'./AccessAlarm\\\'【英文标题】：material-ui:Cannotfindmodule:\'./AccessAlarm\'material-ui：找不到模块：\'./AccessAlarm\'【发布时间】：2020-06-1001:40:10【问题描述】：我们有一个使用@material-ui的项目。它建立在：创建... 查看详情

使用 angular-cli、sass 和 materialize-css 找不到字体

】使用angular-cli、sass和materialize-css找不到字体【英文标题】：Fontnotfoundwithangular-cli,sassandmaterialize-css【发布时间】：2018-04-2920:36:13【问题描述】：当我使用angular-cli和materialize-css时，我正在一个项目中工作，对于我默认使用sass的... 查看详情

Angular Material mat 表合并的行

】AngularMaterialmat表合并的行【英文标题】：AngularMaterialmattablemergedrows【发布时间】：2021-01-0307:42:28【问题描述】：我正在努力解决以下问题。我想将我的基本html表更改为mat-table。但我找不到合并前两列的两行的方法。我在顶部... 查看详情

从“@angunlar/material”导入 DateAdapter ；在角度 9 中找不到

】从“@angunlar/material”导入DateAdapter；在角度9中找不到【英文标题】：importDateAdapterfrom"@angunlar/material";notfindinangular9从“@angunlar/material”导入DateAdapter；在角度9中找不到【发布时间】：2020-07-0119:14:57【问题描述】：importDat... 查看详情

Angular 材质和更改字体

】Angular材质和更改字体【英文标题】：AngularMaterialandchangingfonts【发布时间】：2017-09-3013:05:50【问题描述】：只是想知道如何更改AngularMaterial中的默认字体...默认是Roboto，我找不到将其更改为不同字体的方法。【问题讨论】：看... 查看详情

与 Material-UI 反应找不到模块

】与Material-UI反应找不到模块【英文标题】：ReactwithMaterial-UIcan\'tfindmodule【发布时间】：2019-05-1603:01:00【问题描述】：我想在我的React应用中显示一个Material按钮，但我收到此错误：Failedtocompile../node_modules/@material-ui/core/styles/index.j... 查看详情

如何在 Angular Material Design 中更改 Sidenav 的宽度？

】如何在AngularMaterialDesign中更改Sidenav的宽度？【英文标题】：HowtochangewidthofaSidenavinAngularMaterialDesign?【发布时间】：2015-02-2114:16:53【问题描述】：无论我使用什么屏幕尺寸，Sidenav始终是相同的尺寸。我尝试添加属性，例如-柔性-... 查看详情

Material-UI X：找不到数据网格上下文

】Material-UIX：找不到数据网格上下文【英文标题】：Material-UIX:Couldnotfindthedatagridcontext【发布时间】：2021-11-2803:39:27【问题描述】：我在我的React应用程序中使用Material-UI中的DataGridPro组件。我尝试使用GridToolbarColumnsButton、GridToolbar... 查看详情

在 Angular/Material 中设置 mat-form-field 输入样式

】在Angular/Material中设置mat-form-field输入样式【英文标题】：Stylingmat-form-fieldinputinAngular/Material【发布时间】：2018-07-1011:12:06【问题描述】：我有一个带有输入的mat-form-field，我想向其中添加自定义样式，但是我在AngularMaterial官方... 查看详情

如何修复material-kit-react'找不到模块：webpack loader错误'

】如何修复material-kit-react\\\'找不到模块：webpackloader错误\\\'【英文标题】：Howtofixmaterial-kit-react\'modulenotfound:webpackloadererror\'如何修复material-kit-react\'找不到模块：webpackloader错误\'【发布时间】：2019-12-2010:47:16【问题描述】：我想... 查看详情

Angular Material：“mat-dialog-content”不是已知元素

】AngularMaterial：“mat-dialog-content”不是已知元素【英文标题】：AngularMaterial:\'mat-dialog-content\'isnotaknownelement【发布时间】：2020-07-0212:14:11【问题描述】：在将此问题标记为“重复”之前，请听我说完，因为我被这个问题困扰了好... 查看详情

Flutter 错误 - 找不到 Material 祖先的特定小部件是：

】Flutter错误-找不到Material祖先的特定小部件是：【英文标题】：Fluttererror-ThespecificwidgetthatcouldnotfindaMaterialancestorwas:【发布时间】：2020-02-2814:24:50【问题描述】：我正在使用Align小部件在屏幕底部中心放置一个图标按钮。但是，... 查看详情