nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Standalone Angular Component has errors with AddinClientService and SkyThemeService

David Zeidman

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?

Find more posts tagged with

Comments

David Zeidman

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.

David Zeidman

@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

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.

David Zeidman

@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.

David Zeidman

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.