NullInjectorError: No provider for InjectionToken

I am using an Angular 19 Workspace with SSR/SSG.

I have a service in a library, that uses an Injection Token (from the App):

Service in Library:

import { inject, Injectable } from '@angular/core';
import { STORAGE_BASE_URL } from '../tokens';

@Injectable({
providedIn: 'root',
})
export class ContentService {
private readonly _storageBaseUrl = inject(STORAGE_BASE_URL);

getStorageBaseUrl(): string {
return this._storageBaseUrl;
}
}


tokens.ts in Library:

import { InjectionToken } from '@angular/core';

export const STORAGE_BASE_URL = new InjectionToken<string>('storageBaseUrl');


app.config.ts in App:

import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
providers: [
// [...]
{ provide: 'STORAGE_BASE_URL', useValue: environment.storageBaseUrl },
],
};


The app.config.server.ts gets this as well via:

export const config = mergeApplicationConfig(appConfig, serverConfig);


environment.ts in App:

export const environment = {
storageBaseUrl: 'https://foo',
};


When I try to use the Service (import { ContentService } from 'SharedLib'); in the App I receive this error on ng serve after a short delay:

NullInjectorError: No provider for InjectionToken storageBaseUrl!


How can I solve the problem and why is there no provider?

Thank you in advance!

Continue reading...