This query marks the initiation of the narrative for those seeking a deeper understanding.
In an attempt to incorporate this class into app.module:
import { Injectable } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { environment } from '../../../environments/environment';
@Injectable({ providedIn: 'root' })
export class MockKeycloakService {
init(ign: any) {
console.log('[KEYCLOAK] Mocked Keycloak call');
return Promise.resolve(true);
}
getKeycloakInstance() {
return {
loadUserInfo: () => {
let callback;
Promise.resolve().then(() => {
callback({
username: '111111111-11',
name: 'Whatever Something de Paula',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37405f56435241524577505a565e5b1954585a">[email protected]</a>',
});
});
return { success: (fn) => callback = fn };
}
} as any;
}
login() {}
logout() {}
}
const exportKeycloak =
environment.production ? KeycloakService : MockKeycloakService;
export default exportKeycloak;
This conditional exporting allows for a fake keycloak call in local development and switches to the actual class in production mode.
The following app.module was utilized:
<...>
import { KeycloakAngularModule } from 'keycloak-angular';
import KeycloakService from './shared/services/keycloak-mock.service';
import { initializer } from './app-init';
<...>
imports: [
KeycloakAngularModule,
<...>
],
providers: [
<...>,
{
provide: APP_INITIALIZER,
useFactory: initializer,
multi: true,
deps: [KeycloakService, <...>]
},
<...>
],
bootstrap: [AppComponent]
})
export class AppModule { }
Corresponding app-init:
import KeycloakService from './shared/services/keycloak.mock.service';
import { KeycloakUser } from './shared/models/keycloakUser';
import { environment } from '../environments/environment';
<...>
export function initializer(
keycloak: any,
<...>
): () => Promise<any> {
return (): Promise<any> => {
return new Promise(async (res, rej) => {
<...>
await keycloak.init({
<...>
}).then((authenticated: boolean) => {
if (!authenticated) return;
keycloak
.getKeycloakInstance()
.loadUserInfo()
.success(async (user: KeycloakUser) => {
<...>
})
}).catch((err: any) => rej(err));
res();
});
};
Everything functions properly in development mode. I am able to utilize the mock call, and upon enabling production mode in the environment configuration, the real call is made. However, when attempting to compile for deployment on a production server, the following error occurs:
ERROR in Can't resolve all parameters for ɵ1 in /vagrant/frontend/src/app/app.module.ts: (?, [object Object], [object Object]).
It seems that the build task fails to comprehend the conditional export in the mocked class for use in app.module.
As a result, I am required to include both classes in app-init and other areas where it is used, checking for the environment mode in each instance. It would be more efficient if I could simply utilize a single class to handle this scenario and import it wherever necessary.
Here is my build command:
ng build --prod=true --configuration=production --delete-output-path --output-path=dist/
How can I address this error during the build process? Furthermore, why does everything function smoothly in development mode while encountering discrepancies during the build?