Angular export const is not storing the right object

Question

I am facing a weird issue in my Angular project. I am storing few configurations in environment files and exporting the constants for other modules to consume in the project. However, when I am referencing the constant object I am getting some other instance "Module" object instead. I must be doing something wrong but can't figure out what!

The constant from environment file:

Referencing code:

The object in runtime (in console):

Please let me know if I am doing anything wrong here!

Answer 1

Very strangely so the object is 'inconsistent' in nature for some unknown reason. Thanks to @Afsar for the answer, I was able to approach in a different angle, but sometimes my object is encapsulated within another object and sometimes not, so I have the below code which is working for me in both scenarios:

@Injectable({
    providedIn: 'root',
})
export class UDXAuthConfigService extends AuthConfigService {
    public override getClientSecret(): string {
        var theCLiendIDValue = environment.client_id_value;
        if (!theCLiendIDValue) {
            // For some reason the value is stored inside the property's property! Behavior documented here: https://stackoverflow.com/questions/78524820/angular-export-const-is-not-storing-the-right-object
            let theEnvironment: any = environment;
            if (theEnvironment.environment) {
                theCLiendIDValue = theEnvironment.environment.client_id_value;
            }
        }
        return theCLiendIDValue;
    }
}

I am yet to get to the bottom of it, have it documented, but this works for me at the moment.

Answer 2

Define environment local property in your udx-auth-config file;

Reason: angular import scope will be local to fine so to access any property you have create local version of it . add this line before line number 9 in udx-auth-config file

environment = environment;