JHipster AngularJS 2項目的角度材料集成

在按照步驟將角度材料集成到JHipster AngularJS 2項目中時，我遇到了問題。JHipster AngularJS 2項目的角度材料集成

我按照下面的網址做到這一點

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

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

但我沒有找出systemJS.config.js文件在我JHipster產生Angular2項目。

如果您有任何人已將此與JHipster生成的項目結構（其中systemjs.config.js文件丟失）集成，請幫我解決這個問題。

來源

2017-03-23 Rama Krishna

我不認爲JHipster使用'systemJS'。檢查它是否使用'commonJS'。 – Prajwal

是的，'commonJS'文件在那裏，但如何添加地圖，路徑...等，你可以分享遵循的步驟 –

沒有必要像其他人提到的那樣需要SystemJS。

這是我做過什麼來得到它的工作：

添加材料和hammerjs

紗加@角/材料hammerjs （紗安裝如果需要的話）
編輯app.module.ts

從'@ angular/material'導入{MaterialModule}; import'hammerjs';

和

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

添加樣式vendor.scss。在引導之前添加它

@import'node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.scss'; @import'node_modules/bootstrap/scss/bootstrap'; @import'node_modules/font-awesome/scss/font-awesome';

修改webpack.vendor.scss

module.exports = { 項：{ '廠商'：[ './src/main/webapp/app/vendor'，「@angular /共同」， '@角/材料'

  ] 
}

測試它。修改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

來源

2017-03-27 13:04:22

謝謝基蘭，我跟着你，但它不能爲我工作。僅獲得正常按鈕的輸出 –

不確定發生了什麼，但您可能需要檢查樣式的路徑。我可以在vendor.scss中成功添加一些樣式例如：@import'../../../../../node_modules/angular-calendar/scss/angular-calendar.scss'; –

對不起，我忽略了** main.component.html **我嘗試在新生成的實體（** web app/app/entities/**）中使用。現在在main.component.html中實現，現在我可以看到更改。謝謝你的幫助。感謝您對以下問題的意見。 –

JHipster AngularJS 2項目的角度材料集成

回答

相關問題