Angular 9中MatExpansionModule无法解析，dashboard模块报错求助

Hey there, let’s dig into why your Angular project is crashing even after importing MatExpansionModule — since the error is popping up in your dashboard module, this is almost always a module scoping or dependency issue, not a problem with @angular/material itself. Here are the most common fixes to try:

1. Import the module directly into your Dashboard Feature Module #

Angular modules don’t automatically inherit imports from the root app.module.ts unless you use a shared module. If your dashboard is a separate feature module, you need to add MatExpansionModule directly there, not just in the root module.

Here’s how your dashboard.module.ts should look:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import the expansion module here
import { MatExpansionModule } from '@angular/material/expansion';
import { DashboardComponent } from './dashboard.component';

@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule,
    MatExpansionModule // Critical: Add it to the imports array of THIS module
  ],
  exports: [DashboardComponent] // Only if you need to use this component in parent modules
})
export class DashboardModule { }

2. Check for Version Mismatches #

A frequent hidden issue is mismatched versions between @angular/material, @angular/core, and @angular/cdk. Even small version gaps can break Material components.

Run this command in your project root to verify versions:

ng list @angular/core @angular/material @angular/cdk

If any versions don’t match, update them to align. Use Angular’s official update command to avoid breaking changes:

ng update @angular/material

3. Ensure Peer Dependencies Are Installed #

MatExpansionModule relies on @angular/cdk (Component Dev Kit) under the hood. If you don’t have it installed, or if its version is off, you’ll run into crashes.

Install it (matching your Angular version) if missing:

npm install @angular/cdk@<your-angular-version-number>

For example, if you’re on Angular 16:

npm install @angular/cdk@16

4. Clear Build Cache and Rebuild #

Sometimes stale build artifacts can cause weird, unexplained errors. Clear your Angular cache and do a fresh build:

ng cache clean
ng build --delete-output-path

If none of these fixes work, sharing the exact error message from your browser console or terminal would help narrow down the issue further — but these steps resolve 90% of cases like this!

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