Skip to content

Cannot Override ThemeService Globally in Standalone Angular Apps #4

@JoshuaAlzate

Description

@JoshuaAlzate

Description

When using the @slateui/theme package in a standalone Angular application (without NgModules), it is not possible to globally override the provided ThemeService with a custom extended implementation. Even when importing and injecting the extended service everywhere in the app, Angular's DI system resolves the base service if it is also provided in root by the library.

Steps to Reproduce

  1. Create a standalone Angular app (no NgModule).
  2. Extend the ThemeService from @slateui/theme to add custom methods.
  3. Provide the extended service with providedIn: 'root'.
  4. Import and inject the extended service in all components.
  5. Use the theme toggle switch in the UI.
  6. Observe that the theme toggle switch no longer works as expected.

Sample Implementation

import { Injectable } from '@angular/core';
import { ThemeService as SlateThemeService } from '@slateui/theme';

@Injectable({
  providedIn: 'root',
})
export class ThemeService extends SlateThemeService {
  getCssVariable(name: string): string {
    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  }
}

Expected Behavior

  • The extended service should be used everywhere in the app when imported and injected, allowing custom methods to work.
  • The theme toggle switch should continue to work as expected.
  • There should be a documented way to globally override the base service in standalone Angular apps.

Actual Behavior

  • The base service is resolved by Angular's DI system, and custom methods from the extended service are not available.
  • The theme toggle switch in the UI does not work anymore.
  • No way to override the provider globally without NgModule.

Suggested Solution

  • Provide a mechanism or documentation for overriding the base service globally in standalone Angular apps.
  • Consider supporting a DI token or configuration for custom service implementations.

Environment

  • Angular version: 20
  • @slateui/theme version: 1
  • zoneless: yes
  • SSR: yes

Additional Context

This limitation prevents advanced customisation and extension of the theme service in modern Angular applications using the standalone API. It also breaks existing UI features such as the theme toggle switch.


Thank you for your work on this library!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions