Angular注入ErrorHandler后无法访问实现类属性的TS错误解决

Hey there, let's break down why you're seeing that TypeScript error and walk through a few solid solutions to fix it.

Why the Error Happens #

When you configure { provide: ErrorHandler, useClass: GlobalErrorHandler } in your app.module.ts, Angular's dependency injection (DI) system will inject an instance of GlobalErrorHandler whenever you ask for ErrorHandler—but TypeScript only knows the injected value is of type ErrorHandler (the base class). Since the base ErrorHandler doesn't have an errorAdded$ property, TypeScript throws an error when you try to access it.

As for why injecting GlobalErrorHandler directly fails: by default, Angular's DI doesn't register your custom class as a provider unless you explicitly add it to the providers array. Even though you mapped ErrorHandler to GlobalErrorHandler, the DI system doesn't automatically recognize GlobalErrorHandler as a standalone injectable.

Solution 1: Quick Fix with Type Assertion #

If you need a fast workaround, you can use a type assertion to tell TypeScript that the injected ErrorHandler is actually your GlobalErrorHandler:

@Injectable()
export class AlertService {
  private subject = new Subject<Alert>();
  private keepAfterRouteChange = false;

  constructor(private router: Router, private errorService: ErrorHandler) {
    // Assert the errorService is GlobalErrorHandler
    (this.errorService as GlobalErrorHandler).errorAdded$.subscribe((error) => this.error(error));
  }

  // ... rest of your code
}

⚠️ Note: This works but skips TypeScript's type checks. If you ever change your DI configuration or modify GlobalErrorHandler, you might get runtime errors instead of compile-time warnings.

Solution 2: Register GlobalErrorHandler as a Standalone Provider #

A better approach is to register GlobalErrorHandler directly in your providers, then use useExisting to link it to the ErrorHandler token. This lets you inject the concrete class directly with full type safety:

1. Update your app.module.ts providers:

providers: [
  GlobalErrorHandler, // Register the custom class as a provider
  { provide: ErrorHandler, useExisting: GlobalErrorHandler } // Reuse the same instance for ErrorHandler
]

2. Inject GlobalErrorHandler directly in AlertService:

@Injectable()
export class AlertService {
  private subject = new Subject<Alert>();
  private keepAfterRouteChange = false;

  constructor(private router: Router, private errorService: GlobalErrorHandler) {
    this.errorService.errorAdded$.subscribe((error) => this.error(error));
  }

  // ... rest of your code
}

This keeps type safety and ensures Angular uses the same instance of GlobalErrorHandler for both the global error handling and your AlertService.

Solution 3: Use an Abstract Class (Best Practice, Follows SOLID) #

For a more maintainable, scalable solution (especially in larger apps), use an abstract class to define the contract for your error handler. This follows the dependency inversion principle—your AlertService depends on an abstraction, not a concrete class.

1. Create an abstract class that extends ErrorHandler:

export abstract class IGlobalErrorHandler extends ErrorHandler {
  abstract errorAdded$: EventEmitter<string>;
}

2. Update your GlobalErrorHandler to implement this abstract class (don't forget to implement the required handleError method from ErrorHandler):

@Injectable()
export class GlobalErrorHandler extends IGlobalErrorHandler {
  public errorAdded$: EventEmitter<string>;

  constructor(private injector: Injector) {
    super(); // Call the base ErrorHandler constructor
    this.errorAdded$ = new EventEmitter();
  }

  // Required implementation of ErrorHandler's handleError method
  handleError(error: unknown): void {
    // Add your global error handling logic here
    this.errorAdded$.emit(error.toString());
  }
}

3. Configure providers in app.module.ts:

providers: [
  { provide: IGlobalErrorHandler, useClass: GlobalErrorHandler },
  { provide: ErrorHandler, useExisting: IGlobalErrorHandler }
]

4. Inject the abstract class in AlertService:

@Injectable()
export class AlertService {
  private subject = new Subject<Alert>();
  private keepAfterRouteChange = false;

  constructor(private router: Router, private errorService: IGlobalErrorHandler) {
    this.errorService.errorAdded$.subscribe((error) => this.error(error));
  }

  // ... rest of your code
}

This approach makes your code more flexible—if you ever need to replace GlobalErrorHandler with a different implementation, you just need to update the provider configuration without changing AlertService or any other components that depend on IGlobalErrorHandler.

One Last Reminder #

Don't forget to implement the handleError method in your GlobalErrorHandler! The base ErrorHandler class requires this method, and Angular will throw an error if it's missing.

内容的提问来源于stack exchange，提问作者lance-p