创建 Material 模块并将其导入 app.module 后，Angular Material 主题未应用于子模块。

Question

如许多其他教程所建议的那样，我决定从特定的 Angular Material 模块中清除我的 app.module，并创建了一个名为"material module"的单独模块 - 然后将此模块直接导入到 app.module 的imports 数组中。现在，如果我在app.component.html中有一个Material按钮，一切都很好，主题应用也被应用。然而，我有一个 Auth Module，它通过显示，但是任何 Angular 主题都不会应用于该模块，它们都是基本的HTML元素。我确信我错过了一些关于Angular模块应该如何工作的非常明显的东西，但在阅读了很多此处的帖子以及通过谷歌搜索+文档阅读了一些论坛后，我仍然无法弄清楚我错过的是什么。

- SebastianG

---

您需要将您的Material模块导入Auth模块吗？ - Darren Lamb

这似乎可以工作，但是我最终不会有一个单例核心材料模块吗？ - SebastianG

它仍然是一个“单例”。你只在一个地方定义了它，而且所有的代码都在那个地方。但你仍然需要将它的模块导入到任何依赖的模块或组件中。否则，Angular 就不知道它应该应用于依赖模块。 - Rich

我明白了，这就是期望/设计/正确的做法吗？创建一个这样的模块并在任何地方导入它？所有关于此的谷歌搜索都在谈论提供者数组以及如何不要在共享模块中使用服务，或者如果必须使用服务，只需使用.forRoot配置。 - SebastianG

在Angular中，模块充当编译上下文，如果您不将MaterialModule导入到AuthModule中，则材料对象位于上下文之外，Angular对它们一无所知。是的，这是共享代码的一种可接受方式。.forRoot方法用于服务，您正在讨论的是Angular组件（ng-button等）。请参阅此处有关共享模块的Angular文档：https://angular.io/guide/sharing-ngmodules - Darren Lamb

@DarrenLamb 感谢您澄清这一点，如果您想将其发布为答案，我很乐意将其标记为解决方案。 - SebastianG

Answer 1

这里的问题不在于主题，而是AuthModule不知道如何解析材料组件。

在Angular中，模块充当编译上下文，如果您不将MaterialModule导入到AuthModule中，则材料组件位于上下文之外，angular对它们一无所知。

将MaterialModule导入到AuthModule中即可解决此问题，例如：

material.module.ts：

@NgModule({
  imports: [MatButtonModule, MatListModule],
  exports: [MatButtonModule, MatListModule],
})
export class MaterialModule {}

auth.module.ts

@NgModule({
  imports: [CommonModule, MaterialModule],
  providers: ...,
})
export class AuthModule {}

请注意：

• MaterialModule 导出 MatButtonModule
• AuthModule 导入 MaterialModule 因此，AuthModule 可以访问在 MatButtonModule 中定义的组件。

要了解更多信息，请参见 Angular 文档：https://angular.io/guide/sharing-ngmodules。

- Darren Lamb

Answer 2

1. 您可以在angular.json文件中检查这些行：

   "styles": [
             {
               "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             },
   

2. 您可以在项目文件夹中执行以下命令，自动更新您的Angular项目并安装正确的依赖项。

   ng add @angular/material
   

- user3804427

---

这只是将Angular Material添加到应用程序的基本说明，我谈论的是在保持单例的同时跨懒加载模块导入自定义共享模块的方式。 - SebastianG

你必须仅在惰性加载模块中导入材料模块，以避免在tsc编译器中出现错误，但是在angular.json中导入的css文件将应用于所有模块。你没有展示你的例子，别人怎么帮你呢？但我会尝试，你可以在CoreUI git上展示例子：https://github.com/coreui/coreui-free-angular-admin-template - user3804427