How to Set UI Mode (ios or md) Dynamically for Entire App in Ionic Config (app.module.ts)?

Ionic Framework ionic-v3
1

The Config object lets us set a global UI mode such as ‘ios’ or ‘md’ for the whole application, but is there any way to set this dynamically based on a variable in the index.html file?

I’m working on a project where we’d like to set the UI style during app startup instead of during build time. With Ionic 3.9.2 with an AOT error like this:

Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol ‘window’.
Consider exporting the symbol, resolving symbol AppModule in app.module.ts

My index.html file was setting a global variable (eg. window.uxMode) and the failing appComponent code was:

import etc etc 
declare var window: any;

@NgModule({
  declarations: [
    MyApp,
    PAGES,
    DIRECTIVES,
    PIPES
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, {
          mode: window.uxMode, // This seems to fail because it is not an absolute string
            prodMode: true, etc

I tried using the Ionic Config service to set the global mode in app.component.ts but it did not work. At this point it seems like we may have to do two builds and dynamically load the current main.js if we want to support both iOS and MD styles.

Thanks in advance for any tips!

Tom

2

In case it helps anyone else, it seems the ‘md’ and ‘ios’ styles were being globally set as classes (by the same names) applied to ion-app. The solution that worked for me was to create some custom logic on the index.html file to add the ‘md’ class to the ion-app element when required using vanilla javascript per https://appendto.com/2016/02/addremove-css-classes-using-javascript/.