构建Angular应用时出现Material相关错误，求助排查原因

Hey there, let's figure out why you're hitting those Material-related errors in your Angular app. After looking at your package.json dependencies, the root cause is pretty clear—you've got a version mismatch between your Angular core and Angular Material packages.

The Problem Breakdown #

Angular Material has strict version compatibility with Angular itself. Here's what's off in your setup:

• Your Angular core packages are on version 4.4.x (like @angular/core@4.4.6)
• But you're using @angular/material@5.2.3 and @angular/cdk@5.1.1, which are built for Angular 5.x and above. These newer Material versions rely on APIs that don't exist in Angular 4, leading to build errors.

Step-by-Step Fixes #

1. Downgrade Material and CDK to Angular 4-compatible versions
   You need to switch to the 2.x branch of Angular Material and CDK, which matches Angular 4. Run this command to install the correct stable versions:

   npm install @angular/material@2.0.0-beta.12 @angular/cdk@2.0.0-beta.12 --save
   

2. Clean up dependencies to avoid cache conflicts
   Old cached packages can cause issues even after updating versions. Do this to ensure a fresh, conflict-free install:

   • Delete the node_modules folder:

     # Linux/macOS
     rm -rf node_modules
     # Windows (Command Prompt)
     rd /s /q node_modules
     

   • Delete package-lock.json (or yarn.lock if you use Yarn):

     # Linux/macOS
     rm package-lock.json
     # Windows
     del package-lock.json
     

   • Reinstall all dependencies:

     npm install
     

3. Verify Material imports
   Double-check that you're not using any Angular Material 5-specific components or syntax in your code. The 2.x version has some differences (like component selectors or module names), so you might need to adjust your imports if you copied code from newer Material docs.

Quick Version Compatibility Rule #

To avoid this in the future, remember: Angular Material's major version should always match Angular's major version. For example:

• Angular 4 → Material 2.x
• Angular 5 → Material 5.x
• Angular 6 → Material 6.x, and so on.

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