Angular Material - 无法解析 '@angular/material/theming'

Question

我已经按照官方指南创建了一个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'。我该怎么做才能让它正常工作呢？

- nkxandroid

---

你使用的 Angular Material 版本是哪个？ - FAISAL

@Faisal @angular/material@2.0.0-beta.8 - nkxandroid

对于任何在2023年来到这里的人，此配置适用于Angular Material 11。从版本12开始，配置语法发生了重大变化。 - Mojtaba

Answer 1

解决方法：

Angular Material 2文档默认假定您正在使用Sass样式表，但没有明确说明。下面列出的步骤可以用于解决此问题。

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

- nkxandroid

---

重新启动“npm”是指重新启动“ng serve”还是其他什么？ - WasiF

任何angular-cli.json中的更改都需要停止并重新启动服务。对我来说，最好和最干净的解决方案是只将custom.scss条目添加到样式列表中，并避免尝试在styles.css中导入它。 - chavocarlos

Answer 2

Angular 6+ —— 一键式快速安装

在Angular 6+中，你只需像这样安装angular-material

ng add @angular/material

这个命令是干什么的？看看这里：

1. 安装 angular material、cdk 和 animations
2. 在 app.module.ts 中添加引用
3. 在 index.html 中添加 material-icons' 的引用
4. 它会要求您选择所需的主题并添加引用到 angular.json（如果主题无法使用，请按以下说明在 styles.css/styles.scss 中导入）

但在早期版本中，你需要手动执行这些步骤。

Angular 5

使用 Angular5+，以下任一种 import 方法都可以正常工作。

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

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

- WasiF

Answer 3

请尝试以下方法：

1. 将您的主题文件名更改为_app-theme.scss

2. 将您的styles.css更改为styles.scss

3. 像这样将您的主题导入到styles.scss文件中：

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

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

- FAISAL

---

将styles.css重命名为styles.scss时，还需编辑angular.json文件。"styles": [ "src/styles.scss" ]。 - A Kunin

Answer 4

你确定在这个项目中安装了 Angular Materials 吗？有时候你只复制了网页的内容，但是没有复制 node_modules 文件夹，那么编译器就找不到路径“node_modules/@angular/material/theming”。

尝试运行这个命令，你就会明白了。

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

它可能会有所帮助。

- Kolman Robert

Answer 5

1. 检查这个路径 ERROR in ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css 当你安装其他模块或库时。在我的情况下，我安装了Angular Syncfusion调度程序。

2. 在上述路径中添加了一个新的导入语句，所以你需要做的就是将该导入语句剪切并粘贴到style.css中，因为它通常应该在那里。

3. 在执行此过程时，Angular材料文件夹或Angular Syncfusion文件夹也可能会从node_modules中删除，因此请确保您键入命令npm install，以便npm可以安装package.json中提到的所有依赖项。

- Omkar More

Answer 6

根据您提供的官方指南，您不应该将主题文件导入到样式表(styles.css)中，而是应该将其放入angular-cli.json文件的"styles"数组中，类似于以下内容：

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

- Emerson Jair

---

如果我这样做，我会得到“找不到Angular Material核心主题。”和一个损坏的视图。 - nkxandroid

你是否已经安装了@angular/material？请运行npm install --save @angular/material @angular/cdk。 - Emerson Jair

是的，我可以毫不费力地使用预构建的主题和组件，例如MdButton。 - nkxandroid