I’m having 2 issues on with my application in the Homolog server, the first issue is the NG0203 when i have an empty cache:
ERROR RuntimeError: NG0203: inject() must be called from an core.mjs:6531 injection context such as a constructor, a factory function, a field initializer, or a function used with ‘runInInjectionContext’.
and the second issue appears at random times after i have cached some stuff from leaving the webpage open and reloading a few times:
ERROR NullInjectorError: R3InjectorError (Standalone[_AppComponent])[_AutheticationService -> _AutheticationService -> _KeycloakService -> _KeycloakService]: NullInjectorError: No provider for _KeycloakService!
And this second error indicates that it’s happening in:
authentication.service.ts:11:39 and 40:3
The first issue is “resolved” if the user keeps refreshing the page, which seems to create a cache or something.
The Second issue i have no idea why it’s happening and i’m trying to debug my code to look for the cause.
I’ll link the relevant code below:
Here’s my authenticationService code:
<code>import { KeycloakService } from 'keycloak-angular';
import { inject, Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
export class AuthenticationService {
private readonly _keycloakService = inject(KeycloakService);
redirectToLoginPage(): Promise<void> {
return this._keycloakService.login();
return this._keycloakService.getUsername();
return this._keycloakService.isLoggedIn();
async getToken(): Promise<string> {
return await this._keycloakService.getToken();
console.error('Error getting token', error);
this._keycloakService.logout(environment.keycloak.postLogoutRedirectUri);
isSessionActive(): boolean {
return !this._keycloakService.isTokenExpired();
<code>import { KeycloakService } from 'keycloak-angular';
import { inject, Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
u/Injectable({
providedIn: 'root'
})
export class AuthenticationService {
private readonly _keycloakService = inject(KeycloakService);
redirectToLoginPage(): Promise<void> {
return this._keycloakService.login();
}
get userName(): string {
return this._keycloakService.getUsername();
}
isLoggedIn(): boolean {
return this._keycloakService.isLoggedIn();
}
async getToken(): Promise<string> {
try {
return await this._keycloakService.getToken();
} catch (error) {
console.error('Error getting token', error);
throw error;
}
}
logout(): void {
this._keycloakService.logout(environment.keycloak.postLogoutRedirectUri);
}
isSessionActive(): boolean {
return !this._keycloakService.isTokenExpired();
}
}
</code>
import { KeycloakService } from 'keycloak-angular';
import { inject, Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
u/Injectable({
providedIn: 'root'
})
export class AuthenticationService {
private readonly _keycloakService = inject(KeycloakService);
redirectToLoginPage(): Promise<void> {
return this._keycloakService.login();
}
get userName(): string {
return this._keycloakService.getUsername();
}
isLoggedIn(): boolean {
return this._keycloakService.isLoggedIn();
}
async getToken(): Promise<string> {
try {
return await this._keycloakService.getToken();
} catch (error) {
console.error('Error getting token', error);
throw error;
}
}
logout(): void {
this._keycloakService.logout(environment.keycloak.postLogoutRedirectUri);
}
isSessionActive(): boolean {
return !this._keycloakService.isTokenExpired();
}
}
And here’s my Keycloak Initialization:
<code>import { KeycloakService } from 'keycloak-angular';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import { environment } from '../environments/environment';
import { routes } from './app.routes';
export const initializeKeycloak = (keycloak: KeycloakService) => async () => {
url: environment.keycloak.authority,
realm: environment.keycloak.realm,
clientId: environment.keycloak.clientId,
loadUserProfileAtStartUp: true,
redirectUri: environment.keycloak.redirectUri,
enableBearerInterceptor: true
console.error('Keycloak initialization failed:', error);
export const appConfig: ApplicationConfig = {
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
provideAnimationsAsync(),
provideHttpClient(withFetch()),
<code>import { KeycloakService } from 'keycloak-angular';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import { environment } from '../environments/environment';
import { routes } from './app.routes';
export const initializeKeycloak = (keycloak: KeycloakService) => async () => {
try {
await keycloak.init({
config: {
url: environment.keycloak.authority,
realm: environment.keycloak.realm,
clientId: environment.keycloak.clientId,
},
loadUserProfileAtStartUp: true,
initOptions: {
checkLoginIframe: false,
onLoad: 'check-sso',
redirectUri: environment.keycloak.redirectUri,
scope: 'openid',
},
enableBearerInterceptor: true
});
} catch (error) {
console.error('Keycloak initialization failed:', error);
throw error;
}
};
export const appConfig: ApplicationConfig = {
providers: [
KeycloakService,
{
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
multi: true,
deps: [KeycloakService],
},
provideRouter(routes),
provideAnimationsAsync(),
provideHttpClient(withFetch()),
],
};
</code>
import { KeycloakService } from 'keycloak-angular';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router';
import { environment } from '../environments/environment';
import { routes } from './app.routes';
export const initializeKeycloak = (keycloak: KeycloakService) => async () => {
try {
await keycloak.init({
config: {
url: environment.keycloak.authority,
realm: environment.keycloak.realm,
clientId: environment.keycloak.clientId,
},
loadUserProfileAtStartUp: true,
initOptions: {
checkLoginIframe: false,
onLoad: 'check-sso',
redirectUri: environment.keycloak.redirectUri,
scope: 'openid',
},
enableBearerInterceptor: true
});
} catch (error) {
console.error('Keycloak initialization failed:', error);
throw error;
}
};
export const appConfig: ApplicationConfig = {
providers: [
KeycloakService,
{
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
multi: true,
deps: [KeycloakService],
},
provideRouter(routes),
provideAnimationsAsync(),
provideHttpClient(withFetch()),
],
};
Main.ts
<code>import { registerLocaleData } from '@angular/common';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import localePt from '@angular/common/locales/pt';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withViewTransitions } from '@angular/router';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { routes } from './app/app.routes';
import { keycloakHttpInterceptor } from './app/interceptor/keycloak-http.interceptor';
registerLocaleData(localePt, 'pt-BR');
bootstrapApplication(AppComponent, {
provideHttpClient(withInterceptors([keycloakHttpInterceptor])),
provideRouter(routes, withViewTransitions())
console.error('Application bootstrapping failed:', err);
<code>import { registerLocaleData } from '@angular/common';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import localePt from '@angular/common/locales/pt';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withViewTransitions } from '@angular/router';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { routes } from './app/app.routes';
import { keycloakHttpInterceptor } from './app/interceptor/keycloak-http.interceptor';
registerLocaleData(localePt, 'pt-BR');
bootstrapApplication(AppComponent, {
providers: [
...appConfig.providers,
provideHttpClient(withInterceptors([keycloakHttpInterceptor])),
provideRouter(routes, withViewTransitions())
]
}).catch(err => {
console.error('Application bootstrapping failed:', err);
});
</code>
import { registerLocaleData } from '@angular/common';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import localePt from '@angular/common/locales/pt';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withViewTransitions } from '@angular/router';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { routes } from './app/app.routes';
import { keycloakHttpInterceptor } from './app/interceptor/keycloak-http.interceptor';
registerLocaleData(localePt, 'pt-BR');
bootstrapApplication(AppComponent, {
providers: [
...appConfig.providers,
provideHttpClient(withInterceptors([keycloakHttpInterceptor])),
provideRouter(routes, withViewTransitions())
]
}).catch(err => {
console.error('Application bootstrapping failed:', err);
});
Any help understanding the issue is appreciated, Thanks in advance.