使用Angular Material导航生成器遇Schema验证错误求助

Hey there, let's tackle this schema validation error you're hitting when trying to generate a Material navigation component in your new Angular project. I've run into similar hiccups before, so here's what's likely going on and how to fix it:

Common Causes #

This error usually pops up due to one of two main issues:

• Version mismatch: Your Angular CLI and Angular Material versions aren't aligned, leading to incompatible schematic parameters (like the outdated styleext parameter mentioned in your error, which was replaced with style in Angular 10+).
• Stale schematics cache: The Angular CLI might be holding onto old, cached schematic data that doesn't match the current version of Material you're using.

Step-by-Step Solutions #

Let's work through the fixes from simplest to more thorough:

1. Check & Align Your Versions

First, confirm your Angular and Material versions match up. Run this command in your project root:

ng version

Look for @angular/cli and @angular/material—their major version numbers (like 16, 17) should be identical. If they're not:

• Update Angular Material to match your CLI version:

  ng update @angular/material
  

• If you need to update the entire Angular framework to match Material (less common), run:

  ng update @angular/core @angular/cli
  

2. Clear the CLI Cache

Stale cache is a frequent culprit. Let's wipe it and refresh your dependencies:

1. Clear the npm cache:

   npm cache clean --force
   

2. Delete your node_modules folder and lock file:

   rm -rf node_modules package-lock.json
   

3. Reinstall all dependencies:

   npm install
   

3. Generate the Nav Component with Explicit, Updated Parameters

If the error persists, try explicitly passing parameters that match the current schema (replacing the old styleext with style):

ng generate @angular/material:material-nav --name=my-nav --style=css --skip-tests=false

Adjust the --name and --style values to match your project needs.

4. Re-add Angular Material (Last Resort)

If nothing else works, completely remove and re-add Material to ensure you're using the latest, compatible schematics:

1. Remove Material:

   ng remove @angular/material
   

2. Re-add it (follow the prompts for theme, typography, etc.):

   ng add @angular/material
   

Then try generating the nav component again.

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