Angular 预建主题不适用于 Angular8 库答案

【问题标题】：Angular pre-built theme is not working for Angular8 libraryAngular 预建主题不适用于 Angular8 库
【发布时间】：2020-03-18 23:32:12
【问题描述】：

预构建的 Angular 材质主题在库中的工作方式与在 Angular 应用程序中的工作方式不同。在 projects/example-lib 文件夹中创建了一个 style.css 文件，并在其中导入了预构建的 indigo-pink 主题。根据文档，我应该将它包含在 angular.json 文件中，但是在这样做时，我收到以下错误

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles).

Angular Material 设计组件（Mat-Tabs 等）在我的库中工作，但 angular material 主题 不工作。我还尝试将以下内容添加到我的 styles.css 中，

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

这也不起作用。我认为预建的主题没有得到应用，因为 style.css 文件不是全局定义的。还将 ViewEncapsulation.None 添加到库的根组件以删除封装。它似乎对我不起作用。

【问题讨论】：

标签： angular angular-material angular-library

【解决方案1】：

这是来自角度材料网站，它可能会有所帮助：

最后，如果您的应用内容没有放在 mat-sidenav-container 元素中，您需要将 mat-app-background 类添加到您的包装元素（例如主体）中。这可确保将正确的主题背景应用到您的页面。

【讨论】：

我确实将 mat-app-background 类添加到我的包装元素中，但它没有应用预构建的主题。
另外，我在开发者控制台中收到警告说“找不到 Angular Material 核心主题。大多数 Material 组件可能无法按预期工作。”
我希望你能找到答案，但我们真的没有太多工作要做，给我们更多细节，添加一些可能和错误堆栈。

【解决方案2】：

Angular 预建主题不适用于库，因为它不是全局定义的。这基本上意味着我的样式表没有输入到 angular.json 文件的样式 [] 中。以下解决方案适用于全局定义样式 https://medium.com/@Dor3nz/compiling-css-in-new-angular-6-libraries-26f80274d8e5

安装 ng-packagr、scss-bundle 和 ts-node
创建一个 css-bundle.ts https://gist.github.com/Dor3nz/2a33196d2f4b0db7d5ac5904941f5a1b#file-css-bundle-ts
在库的 /src 目录中添加 _theme.scss，该库实际上包含并导入我们要捆绑的所有 css。
添加构建后 npm 脚本以运行 css-bundle.ts
将它包含在您的应用程序的样式标签中，在 angular.json 中

【讨论】：