将共享模块用于多独立Angular应用时ElementRef注入错误排查求助

Let's break down how to resolve this NullInjectorError: No provider for ElementRef! issue you're seeing when using Angular Material buttons in your shared component. This error typically stems from missing or misconfigured module imports/exports in your shared UI-kit module.

Step 1: Verify Shared Module Configuration #

First, ensure your SharedModule properly imports all required Angular Material modules and exports them (so consuming app modules can access their dependencies). You'll also need to include BrowserAnimationsModule since most Material components rely on it for core functionality.

Here's the corrected setup for your SharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import the specific Material module for buttons
import { MatButtonModule } from '@angular/material/button';
// Required for Material animations and component dependencies
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Import your shared component
import { BtnComponent } from './btn/btn.component';

@NgModule({
  declarations: [BtnComponent], // Declare your shared component in the module
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatButtonModule // Import the Material button module to access its components
  ],
  exports: [
    BtnComponent, // Export your component so other modules can use it
    MatButtonModule // Export the Material module to pass along its dependencies
  ]
})
export class SharedModule { }

Step 2: Simplify App Module Imports #

Make sure your consuming application modules (like AppModule) only import SharedModule—don't re-import individual Material modules, as this can cause dependency conflicts and missing provider issues:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SharedModule // Only import the shared module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Double-Check Component Template #

Ensure your BtnComponent template is using the Material button directive correctly—no typos in the directive name or attributes:

<button mat-raised-button color="primary">Click me!</button>

Why This Works #

The ElementRef error occurs because Angular Material's button component relies on internal dependencies that aren't being provided when the module isn't properly imported/exported. By exporting MatButtonModule from your SharedModule, you ensure all consuming modules get access to the full set of dependencies required for Material buttons to function.

If you've already checked these steps and still see the error, try clearing your Angular CLI cache with ng cache clean and restarting the dev server—sometimes cached builds can cause unexpected dependency issues.

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