How can I get a mapbox access token from a backend server instead of hardcoding it in the module import statement?

Question

I have a backend server that has my mapbox access token encrypted. I have an api endpoint that decrypts and returns the access token, (this is protected by a login system). Basically, I want to send an http request to retrieve this token instead of specifying it in the mapPage.module.ts file.

I have looked around various threads and can't seem to find references in relation to ionic, there seems to be a lot of react examples out there.

This was one of the threads I read that seemed to be the closest to what I want, but it isn't using mapbox.

https://github.com/SebastianM/angular-google-maps/issues/882

@NgModule({
  declarations: [
    HomePage,
    MapToIterablePipe
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    ComponentsModule,
    NgxMapboxGLModule,
    HttpModule
    NgxMapboxGLModule.withConfig({
       accessToken: 'my-token-here'
    })
  ]
})
export class HomePageModule {}

I just want to remove the declaration from here and have it specified after the user has logged in to the application.

Expected flow. User opens app -> enters login credentials -> login is performed -> access token is fetched from server -> map loads with the access token.

Answer 1

So I managed to figure it out.

After the authentication passed, I fetched the token from the backend server and saved it into an injectable service.

import { Injectable } from '@angular/core';

@Injectable()
export class StorageService {
    private mapboxToken: string;

    public setMapboxToken(newValue) {
        if( newValue != null) {
            this.mapboxToken = newValue;
        }
    }

    public getMapboxToken() {
        return this.mapboxToken;
    }
}

Then I injected that service into the page that was displaying the map. I set up a getter function on the page that returned the value from the storage service.

export class HomePage {
    map;
    mapCenterCoords = [0, 0];
    constructor(public storage: StorageService) {

    }

    public get mapboxToken() {
        return this.storage.getMapboxToken();
    }
}

In the page html when I set up the map object, there is a property for the access token. I just set this to the getter function in the .ts file.

<ion-content class='background'>
    <mgl-map id='map' 
        [accessToken]="mapboxToken"
        [style]="'mapbox://styles/mapbox/dark-v9'"
        [zoom]="[15]"
        [center]='mapCenterCoordinates'
        (load)="map = $event"
    >
</ion-content>