I am having trouble accessing my environment variables in Angular. What am trying to achieve is merging configuration values coming from the backend/server with the configuration of the frontend. Here are the code snippets:
//— STEP 1: EnvironmentConfiguration
@Injectable({
providedIn: "root"
})
export class EnvironmentConfiguration {
public production = false;
public myapplications?: { [key: string]: string } = {};
[key: string]: unknown;
}
//— STEP 2: environment.ts
export const environmentConfiguration: EnvironmentConfiguration = {
production: false,
myapplications: {
book: 'https://www.book.com',
pen: 'https://www.pen.com'
},
// Adding extra key-value pairs to the config
enableAuthentication: true,
enableSSO: false
}
// — STEP 3: EnvironmentConfigurationService
This service init function is called during application startup to add extra info from the server to the environment object
@Injectable({
providedIn: 'root'
})
export class EnvironmentConfigurationService {
private informationService = inject(InformationService);
private environment: EnvironmentConfiguration = new EnvironmentConfiguration();
get Environment(): EnvironmentConfiguration {
return this.environment;
}
public initializeEnvironment(angularConfig: EnvironmentConfiguration): Promise<void> {
this.environment = angularConfig;
this.informationService.getInformation().pipe(finalize(() => resolve())).subscribe({
next: result => {
// Here am adding extra info from the server to the environment object
this.environment['shelf'] = result.shelf?.id;
this.environment['table'] = result.table?.id;
this.environment['carpet'] = result.carpet?.id;
},
error: err =>
this.logger.error('Problem loading application info', err);
complete: () => this.logger.debug('Merging info with Angular environment config')
});
}
}
// — STEP 4: App initialization function. This method is called during Angular application startup (is called from the app.config.ts). The “environmentConfig” parameter will be the const variable “environmentConfiguration” defined in step 2 (from the environment.ts file) so that extra data from the server can be added to it.
export function provideEnvironmentConfig(environmentConfig: EnvironmentConfig): EnvironmentProviders {
return makeEnvironmentProviders([
provideAppInitializer(() => {
const environmentConfigurationService = inject(EnvironmentConfigurationService);
return environmentConfigService.initEnvironment(environmentConfig)
})
]);
}
//– STEP 5: I inject the EnvironmentConfigurationService in the menu service to have access to the environment object so that i can access the config info added from the backend/server
@Injectable({
providedIn: 'root'
})
export class MenuService {
private environmentConfigurationService = inject(EnvironmentConfigurationService);
// In this method i want to have access to the values added to the environment object from the server. When i log the whole object i see that values from the server are present but when i try to extract a specific value using the bracket notation i get undefined, very weird behavior i don't understand.
processMenu() {
const config = this.environmentConfigurationService.EnvironmentConfig;
console.log(config) // displays the whole object including values from the server
const shelf = config['shelf'];
console.log(shelf) // displays undefined
}
}
I have no idea what am doing wrong. Am i accessing the data in a wrong way? Any pointer to a blog or tutorial to fix it will be much appreciated.
