Question

我在遵循将Angular Material集成到JHipster AngularJS 2项目中的步骤时遇到了问题。

我已按照以下网址执行此操作

https://material.angular.io/guide/getting-started

https://material.angular.io/guide/theming

但是我在JHipster生成的Angular2项目中找不到systemJS.config.js文件。

如果您有任何人将其与JHipster生成的项目结构（缺少systemjs.config.js文件）集成，请帮我解决这个问题。

Answer 1

不像其他人提到的那样需要SystemJS。

这就是我为使其发挥作用所做的事情：

添加材料和锤子

纱线添加@ angular / material hammerjs （纱线安装，如果需要）
修改app.module.ts

从＆＃39; @ angular / material＆＃39;中导入{MaterialModule}; import＆＃39; hammerjs＆＃39;;

和

@NgModule({
    imports: [
        BrowserModule,
        LayoutRoutingModule,
        Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
        GatewaySharedModule,
        GatewayHomeModule,
        GatewayAdminModule,
        GatewayAccountModule,
        GatewayEntityModule,
        MaterialModule

将样式添加到vendor.scss。在bootstrap之前添加它

@import＆＃39; node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.scss' ;; @import＆＃39; node_modules / bootstrap / scss / bootstrap＆＃39 ;; @import＆＃39; node_modules / font-awesome / scss / font-awesome＆＃39;;
修改webpack.vendor.scss

module.exports = { 条目：{ ＆＃39;供应商＆＃39;：[ ＆＃39; ./ SRC /主/ web应用/应用/供应商＆＃39 ;, ＆＃39; @角/共同＆＃39 ;, 的＆＃39; @角/材料＆＃39;

] }

测试一下。修改main.component.html

<jhi-page-ribbon></jhi-page-ribbon> <div> <router-outlet name="navbar"></router-outlet> </div> <div class="container-fluid"> <div class="card jh-card"> <md-card> <md-card-content> <button md-raised-button> Raised </button> <button md-fab> Click! </button> </md-card-content> </md-card> <router-outlet></router-outlet> <router-outlet name="popup"></router-outlet> </div> <jhi-footer></jhi-footer> </div>

View Material components on the homepage

JHipster AngularJS 2项目的Angular Material集成

1 个答案: