Angular: Accessing environment variables not working after deployment

I have been struggling with accessing my bucket in AWS during deployment. It is working fine in development and not sure why?

in development - (environments/environment.ts):

and in service.ts:

AWS.config.update({
        accessKeyId: environment.accessKeyId,
        secretAccessKey: environment.secretAccessKey,
        region: 'ap-south-1'
});

const bucket = new S3(AWS.config);

@Injectable({
  providedIn: 'root'
})

export class S3Service {
  bucketName: string = 'angular-upload-files-2023-2024'
  loader: EventEmitter<boolean> = new EventEmitter<boolean>()
  currentFolder: string = '';

  constructor() { }

  getFolderContent(): Observable<any> {
    return new Observable((observer) => {
      this.loader.next(true);
      bucket.listObjectsV2({ Bucket: this.bucketName, Prefix: this.currentFolder, Delimiter: '/' }, (err: AWS.AWSError, data: S3.ListObjectsV2Output) => {
        this.loader.next(false);
        console.log(data)
        if (err) {
          observer.error(err);
        }
        else {
          let list: any[] = [];
          list = list.concat(data.CommonPrefixes?.map(m => { return { name: m.Prefix, contentType: 'folder' } }));
          list = list.concat(data.Contents?.filter(m => m.Key != this.currentFolder).map(m => { return { name: m.Key, contentType: 'file', modifiedTime: m.LastModified?.toDateString() } }));
          observer.next(list);
        }

      });
    })

  }

but in deployment it is not showing any error or showing any folder! I did assign the environment variabkes in my deployment server using render.com and it says that i need to something else to make it work,

export const environment = {
    
        region: 'ap-south-1',
        accessKeyId: '???',
        secretAccessKey: '???',
}