如何在 jhipster 中添加角度材料设计答案

【问题标题】：How to add angular material design to jhipster如何在 jhipster 中添加角度材料设计
【发布时间】：2017-12-08 03:49:50
【问题描述】：

我正在尝试将材料设计添加到 jhipster 生成的网关。虽然它似乎在工作，但我在控制台上收到了这个警告；

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Could not find HammerJS. Certain Angular Material components may not work correctly.

下面几行添加到 package.json 依赖项

"@angular/material": "^2.0.0-beta.7",
"hammerjs": "^2.0.8",

以下行被添加到 global.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700');
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

请注意，如果我注释掉 indigo-pink.css 行 UI 会变得更丑，所以我得出结论，当没有注释时，此 css 已成功导入。

Jhipster 版本是 4.5.6

警告的原因可能是什么

编辑1：这解决了hammerjs警告https://stackoverflow.com/a/41322757/795168，但主题警告和UI上的问题仍在继续

【问题讨论】：

删除 bootsrap 包试试这个

标签： jhipster

【解决方案1】：

向单体 jhipster 项目添加角度材料对我有用，如果安装了hammerjs，则删除它

npm uninstall hammerjs --save

并验证 package.json 文件中已删除

【讨论】：

【解决方案2】：

安装@angular/material 库并将依赖添加到package.json

npm install --save @angular/material

将 Angular Material NgModule 导入您的应用模块...

import { MaterialModule } from '@angular/material';

@NgModule({
  imports: [
  ...
  MaterialModule
 ],
  ...
})

现在项目已设置完毕，必须将其配置为包含主题的 CSS。 Angular Material 附带了一些预构建的主题，位于 node_modules/@angular/material/prebuilt-themes/。

为您的应用添加角度 CSS 主题和材质图标

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

请查看链接Install Angular Material

【讨论】：

我已经做了所有这些步骤，你知道 jhipster 吗？问题与 jhipster 有关
我创建 jhipster 应用程序至少一个应用程序。 jhipster 完全支持 angular cli。这行得通。您的具体问题是什么？
将 deeppurple-amber.css 直接添加到 index.html 解决了警告问题，但材料小部件无法按预期工作。例如 md 菜单打开后未关闭