Question

我正在尝试将材料设计添加到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上的主题警告和问题仍然存在

Answer 1

通过删除hammerjs（如果已安装），为monolothic jhipster项目添加角度材料为我工作

npm uninstall hammerjs --save

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

Answer 2

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

npm install --save @angular/material

将Angular Material NgModule导入您的app模块......

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添加角度材料设计

2 个答案: