JHipster生成的应用无法兼容Angular Material2，寻求技术解决

Let me walk through targeted checks and fixes based on your setup—since you’re not seeing error logs, we’ll focus on common silent failure points with JHipster and Material2:

1. Verify Version Compatibility First #

JHipster locks in specific Angular versions, and Material2 has strict version matching rules. Open your package.json and confirm:

• The version of @angular/core matches exactly with @angular/material (e.g., Angular 5.x needs Material 5.x, Angular 6.x needs Material 6.x)
• If they’re mismatched, uninstall the current Material package and install the compatible version:

  yarn remove @angular/material @angular/cdk
  yarn add @angular/material@<your-angular-version> @angular/cdk@<your-angular-version>
  

2. Confirm Module Import in App Module #

Your DemoMaterialModule exports all Material components, but did you add it to your root app.module.ts? Double-check that your imports array includes:

import { DemoMaterialModule } from './path-to-your-demo-material-module';

@NgModule({
  imports: [
    // ... other imports
    DemoMaterialModule
  ]
})
export class JsueAppModule {}

Without this, Material components won’t be available to your app.

3. Fix Style Loading Order #

Your vendor.scss loads Material’s theme before Bootstrap, which can lead to Bootstrap overriding Material styles. Try reordering the imports to load Material after Bootstrap:

/* after changing this file run 'yarn run webpack:build' */
$fa-font-path: '~font-awesome/fonts';
@import 'theme.scss';
// Override Boostrap variables
@import "bootstrap-variables";
// Import Bootstrap source files from node_modules
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/font-awesome/scss/font-awesome';
// Move Material theme to the end
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

If that doesn’t work, inspect a Material component in Chrome DevTools (Elements tab) to see if its styles are being overridden by Bootstrap classes.

4. Validate HammerJS Setup #

You’ve imported HammerJS in app.main.ts, but confirm:

• HammerJS is installed: Run yarn list hammerjs to ensure it’s in your dependencies. If not, install it with yarn add hammerjs.
• The import is placed before bootstrapping the module (your current code does this correctly, but double-check no other code is interfering).

5. Clean Cache and Rebuild #

JHipster’s webpack cache can cause silent failures. Try a full clean rebuild:

rm -rf node_modules
rm package-lock.json yarn.lock
yarn cache clean
yarn install
yarn run webpack:build

6. Test with a Minimal Material Component #

Create a simple test component to rule out complex interactions. Add this to any template:

<mat-button color="primary">Test Material Button</mat-button>

If this doesn’t render correctly, check the DOM in DevTools:

• If the element exists but has no styles: Style loading issue (go back to step 3)
• If the element doesn’t exist at all: Module import issue (step 2)

7. Check JHipster’s Webpack Config #

JHipster’s webpack setup might exclude certain files. Open webpack.common.js and ensure:

• CSS loaders are configured to handle node_modules/@angular/material/**/*.css
• There are no rules that would prevent Material’s assets from being bundled

内容的提问来源于stack exchange，提问作者SUE