Angular Material Integration für JHipster AngularJS 2 Projekt

Question

Ich habe Probleme mit den Schritten zur Integration von Angular Material in das JHipster AngularJS 2 Projekt.

Ich habe unten URLs folgte diesem

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

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

zu tun, aber ich konnte die systemJS.config.js Datei in meinem JHipster erzeugt Angular2 Projekt identifizieren.

Wenn jemand von Ihnen diese mit JHipster generierte Projektstruktur integriert hat (wo systemjs.config.js Datei fehlt), bitte helfen Sie mir dabei.

Answer 1

Keine SystemJS wie die anderen erwähnt haben.

Dies ist, was ich daran zu arbeiten bekommen tat:

1. Material und hammerjs hinzufügen

   Garn hinzufügen @ Winkel/Material hammerjs (Garn installieren, wenn erforderlich)

2. Bearbeiten app.module.ts

   Import {MaterialModule} von '@ angular/material'; Import 'Hammerjs';

und

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

3. die Stile In der vendor.scss. Fügen Sie es vor dem Bootstrap hinzu

   @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';

4. Ändern der webpack.vendor.scss

   module.exports = { Eintrag: { 'Verkäufer': [ './src/main/webapp/app/vendor', ‚@angular/common‘, '@ Winkel/Material'

     ] 
   } 
   

5. -Test es. Ändern Sie den 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> 
   

6. View Material components on the homepage