Standalone Angular Component has errors with AddinClientService and SkyThemeService

I have created addins previously but never both as a newer Angular standalone component and also using SkyUX components.

When I attempt to load my addin I get the following error caught in the bootstrap statement in main.ts.

main.ts:6 ERROR NullInjectorError: NullInjectorError: No provider for _SkyThemeService!
at NullInjector.get (core.mjs:1654:27)
at R3Injector.get (core.mjs:3093:33)
at R3Injector.get (core.mjs:3093:33)
at injectInjectorOnly (core.mjs:1100:40)
at ɵɵinject (core.mjs:1106:42)
at inject (core.mjs:1192:12)
at new _AddinClientService (blackbaud-skyux-lib-addin-client.mjs:55:26)
at Object.AddinClientService_Factory [as factory] (blackbaud-skyux-lib-addin-client.mjs:262:14)
at core.mjs:3219:47
at runInInjectorProfilerContext (core.mjs:866:9)

Has anybody encountered this? I have attempted to add both AddinClientService and SkyThemeService (which I do not use directly) to the providers array of my app.config.ts file as below:

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideHttpClient(),
importProvidersFrom([
AddinClientService,
SkyThemeService
]),
]
};

Nothing that I do seems to help. Any thoughts about why this is happening?

Comments

  • So I have been testing a little and created a new pared back application. It has one component that does nothing other than the default statement that the component works.

    As soon as I added

    constructor(clientService: AddinClientService){}

    I got the previous error. I attempted to add the service to the app.config.ts file as below:

    export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes),
    importProvidersFrom(AddinClientService)
    ]};

    This did not help though. The error

    NullInjectorError: No provider for _SkyThemeService

    makes me think that it is not something that I am doing given that I am not directly referencing the SkyThemeService.

  • @Michael Tims (I hope that you are active on this community). I took a look at the github source and can see that the SkyThemeService is added to the providers section for the showcase project but there does not appear to be a place to add it into AddinClientService. I am not familiar with creating services as a library without any module file at all (and this does not appear to follow the standalone model).

    @Chris Rodgers any thoughts?

  • Michael Tims
    Michael Tims Blackbaud Employee
    Seventh Anniversary Kudos 2 Name Dropper Participant

    Hi @David Zeidman - not aware of any issues at the moment with being able to have the `SkyThemeService` provided with standalone components. I will try to reproduce the issue today and report back.

  • @Michael Tims Thank you. Just to be clear, I am not using the SkyThemeService directly. My pared back standalone app simply injected the AddClientService to the component and I got that error.

  • Just in case anybody should come across this thread and want to know how it was resolved, here is what @Michael Tims came up with as a workaround.

    import { ApplicationConfig } from '@angular/core';
    import { provideRouter } from '@angular/router';
    import { SkyThemeService } from '@skyux/theme';
    import { routes } from './app.routes';

    export const appConfig: ApplicationConfig = {
    providers: [
    provideRouter(routes),
    SkyThemeService
    ]
    };

    By adding the SkyThemeService to the providers array directly (and not using the importProvidersFrom function), the solution worked.

    However, this may well change in the future as there ought not to be a need to add this as a reference when adding the AddinClientService which should encapsulate everything it needs.

Categories