如何修复Angular Material组件构建错误？配置是否存在遗漏？

Hey there! Let's work through your Angular Material build error and verify your configuration step by step, based on the ng version output you provided.

First, Verify Version Compatibility #

Looking at your version details:

• Angular Core: 5.2.5
• @angular/material & @angular/cdk: 5.2.4
• @angular/animations: 5.2.9

While all are on the 5.x major version (which is good), it's best to align the minor versions of Angular packages to avoid unexpected bugs. You can sync the animations package with your core version using:

npm install @angular/animations@5.2.5 --save

Check for Common Configuration Omissions #

These are the most frequent missing steps when setting up Angular Material v5:

1. Import the Animation Module
   Angular Material relies on animations to function properly. In your AppModule, make sure you import either:

   // For full animations support
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   // OR if you don't need animations at all
   import { NoopAnimationsModule } from '@angular/platform-browser/animations';
   

   Then add whichever you choose to the imports array of your module.

2. Add a Material Theme
   You need to include a prebuilt theme in your global styles to render Material components correctly. You can do this in one of two ways:

   • In your styles.css (or styles.scss):

     @import "~@angular/material/prebuilt-themes/indigo-pink.css";
     

   • Or in .angular-cli.json (since you're on CLI 1.7.0) under the apps[0].styles array:

     "styles": [
       "src/styles.css",
       "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
     ]
     

3. Import Individual Material Components
   Angular Material v5 deprecated the single MaterialModule—you need to import specific component modules as needed. For example, if you're using buttons, inputs, and cards:

   import { MatButtonModule, MatInputModule, MatCardModule } from '@angular/material';
   
   @NgModule({
     imports: [
       // ... other existing imports
       MatButtonModule,
       MatInputModule,
       MatCardModule
     ]
   })
   export class AppModule { }
   

4. Validate CLI Build Config
   Double-check your .angular-cli.json to ensure the styles and assets arrays are correctly configured. The styles array should include your global styles file and the Material theme path we mentioned earlier.

Fix Common Build Errors #

Here are solutions for typical issues with your setup:

• "Module not found: Can't resolve '@angular/material'"
  Run this command to ensure Material and CDK are installed with the exact version matching your Angular core:

  npm install @angular/material@5.2.4 @angular/cdk@5.2.4 --save
  

• Style-related errors (e.g., "Undefined mixin mat-elevation")
  Confirm you've imported the Material theme correctly. The ~ prefix tells webpack to look in the node_modules folder—Angular CLI 1.7.0 supports this, so double-check the path for typos.

• Animation-related build failures
  If you see errors about animations, make sure BrowserAnimationsModule or NoopAnimationsModule is imported in your AppModule. Using NoopAnimationsModule will disable animations but resolve any animation-related build issues.

• General build failures
  Try cleaning your project cache and reinstalling dependencies to fix corrupted files:

  # Delete node_modules and lock file
  rm -rf node_modules package-lock.json
  # Reinstall dependencies
  npm install
  # Clean Angular CLI cache
  ng clean
  

• TypeScript version mismatch
  Angular 5.2.x requires TypeScript between 2.4.x and 2.6.x. Run tsc -v to check your global TypeScript version, and update it if needed:

  npm install typescript@2.6.2 --save-dev
  

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