-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Description
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
- Create a standalone Angular app (no NgModule).
- Extend the
ThemeServicefrom@slateui/themeto add custom methods. - Provide the extended service with
providedIn: 'root'. - Import and inject the extended service in all components.
- Use the theme toggle switch in the UI.
- 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
Labels
No labels