Angular 材质 - 无法解析“@angular/material/theming”答案

【问题标题】：Angular Material - Can't resolve '@angular/material/theming'Angular 材质 - 无法解析“@angular/material/theming”
【发布时间】：2020-10-12 13:17:32
【问题描述】：

我已经关注official guide，并创建了一个app-theme.scss，内容如下：

@import '~@angular/material/theming';    
@include mat-core();    
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);    
$candy-app-warn:    mat-palette($mat-red);    
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);    
@include angular-material-theme($candy-app-theme);

styles.css的内容：

@import './app-theme.scss';

但是，我在编译过程中总是收到以下错误：Module not found: Error: Can't resolve '@angular/material/theming'。我必须怎么做才能让它发挥作用？

【问题讨论】：

您使用的是哪个版本的角材料？
@Faisal @angular/material@2.0.0-beta.8

标签： angular sass angular-material2

【解决方案1】：

已解决：

Angular Material 2 文档假定您默认使用 sass 样式表。这从来没有被清楚地传达或解释。下面列出的步骤可用于解决此问题。

将styles.css重命名为styles.scss并将其内容设置为@import './app-theme';
在angular-cli.json 中，将styles: ["styles.css"] 更改为styles: ["styles.scss"]
重启 npm

【讨论】：

restart 'npm' 意思是 'ng serve' 还是别的什么？
angular-cli.json 中的任何更改都需要停止并启动服务。对我来说，最好和干净的解决方案是只在样式列表中添加 custom.scss 条目，并避免尝试在 styles.css 中导入。

【解决方案2】：

Angular 6+ --- 一站式获取所有功能

在Angular 6+，你只需要安装angular-material就好了

ng add @angular/material

这个命令是做什么的？看看这里

安装angular material、cdk、animations
添加对app.module.ts 的引用
将material-icons' 引用添加到index.html
它要求您选择您选择的主题并添加对angular.json 的引用（如果主题不起作用，请按如下所述将其导入styles.css/styles.scss）

但在以前的版本中，您需要手动执行这些步骤

角度 5

使用Angular5+，一种或两种import 方法都适合您

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

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

【讨论】：

【解决方案3】：

试试这个，

将您的主题文件名更改为_app-theme.scss
将您的 styles.css 更改为 styles.scss
将您的主题导入到 styles.scss 文件中，例如：

@import './path/to/your/theme/app-theme'; // 你不需要这里有下划线和文件扩展名

您不需要在 angular-cli.json 样式中包含您的主题文件：[]

【讨论】：

补充：重命名styles.css为styles.scss时，还要编辑angular.json "styles": [ "src/styles.scss" ],

【解决方案4】：

你确定你在这个项目中安装了棱角材料吗？有时您可以只复制网页的内容，但没有 node_modules 文件夹，在这种情况下编译器找不到路径 'node_modules/@angular/material/theming'。

只要试试这个命令，你就会看到。

npm install --save @angular/material @angular/cdk

这会有所帮助。

【讨论】：

【解决方案5】：

根据您提供的官方指南，您不应该将主题文件导入您的 styles.css 文件，而是应该将其放入 angular-cli.json 文件的样式数组中，它应该是接近的对此：

styles: [
  "app-theme.scss",
  "styles.css"
]

【讨论】：

如果我这样做，我会得到“找不到 Angular Material 核心主题”。和一个破碎的视图
你安装了@angular/material 吗？ npm install --save @angular/material @angular/cdk
是的，我可以使用预构建的主题和组件，例如MdButton 没有任何问题。

【解决方案6】：

检查此路径 ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css 中的错误在安装任何其他模块或库时。就我而言，我安装了 Angular Syncfusion 调度程序
在上述路径中添加了一个新的导入语句，因此您只需将该导入语句剪切粘贴到style.css，因为它通常应该在那里
在执行此过程时，Angular 材质文件夹或 Angular Syncfusion 文件夹也可能会从 node_modules 中删除，因此请确保键入命令 npm install 以便 npm 可以安装 package.json 中提到的所有依赖项

【讨论】：