使用@angular/material^5.2.5时出现“mat-nav-list is not a known element”报错

Hey there! Let's get that annoying error sorted out. This issue almost always boils down to missing the required Angular Material module for the nav list component. Here's exactly what you need to do:

• Step 1: Import MatListModule in your component's parent module
  The <mat-nav-list> component lives in the MatListModule—you can't use it unless you explicitly import this module into the NgModule where your component is declared. Open up your module file (like app.module.ts or a feature module) and add these lines:

  // Import the list module from Angular Material
  import { MatListModule } from '@angular/material/list';
  
  @NgModule({
    imports: [
      // Keep your existing imports (BrowserModule, BrowserAnimationsModule, etc.)
      MatListModule // Add this line to the imports array
    ],
    declarations: [
      // Make sure your component using <mat-nav-list> is listed here
    ]
  })
  export class YourModuleName { }
  

  Quick reminder: You also need BrowserAnimationsModule imported in your root module to make all Angular Material components work—don't skip that!

• Step 2: Adjust your shared module (if you use one)
  If you have a shared module for reusing Angular Material components across your app, don't just import MatListModule—you need to export it too so other modules can access it:

  @NgModule({
    imports: [MatListModule],
    exports: [MatListModule] // Export here to make it available to other modules
  })
  export class SharedMaterialModule { }
  

  Then import this shared module into any feature modules that need the nav list component.

• Step 3: Restart your dev server
  Angular's development server can hold onto cached module data sometimes. Stop ng serve and fire it back up to ensure the new module import is loaded properly.

• Step 4: Double-check your template spelling
  It sounds silly, but typos happen! Make sure you've written <mat-nav-list> correctly—no missing hyphens, wrong casing, or extra characters.

If you've gone through all these steps and still see the error, run npm list @angular/material in your terminal to confirm you're actually using version ^5.2.5, and make sure you haven't accidentally mixed imports from different Angular or Angular Material versions.

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