config.mode = ios not working when building for browser

[marcelgoya]

Ionic version: (check one with "x") [ ] 1.x [x ] 2.x [x ] 3.x

I'm submitting a ... (check one with "x") [x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: The config.mode var is not working when I'm compiling the app for platform browser. I'm using the iOS style in my web app but it's using md by default. Setting the variable works when I'm running the app with ionic serve.

Expected behavior: config.mode = 'ios' should set the default style accordingly

Steps to reproduce: Set config.mode = 'ios' in your app config and compile for platform browser.

[jgw96]

Hello, thanks for using Ionic! Could you please post how you're setting the mode config?

[marcelgoya]

Hi @jgw96 ,

sure, I'm doing it directly inside my app.module.ts file.

import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';
import { NgModule, ErrorHandler, enableProdMode } from '@angular/core';
import { Ng2UiAuthModule, CustomConfig } from 'ng2-ui-auth';
import { BrowserModule } from "@angular/platform-browser";
import { IonicApp, IonicModule } from 'ionic-angular';
import { HttpModule, Http } from '@angular/http';

import { Camera } from '@ionic-native/camera';
import { File } from '@ionic-native/file';
import { Geolocation } from '@ionic-native/geolocation';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { MediaCapture } from '@ionic-native/media-capture';
import { Network } from '@ionic-native/network';
import { SafariViewController } from '@ionic-native/safari-view-controller';
import { SocialSharing } from '@ionic-native/social-sharing';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MyApp } from './app.component';
import { SentryErrorHandler } from './errorHandler';

import { TabsPage } from '../pages/tabs/tabs';
import { TabsSplitPanePage } from '../pages/tabs/tabs-split-pane';
import { LoginPage } from '../pages/authentification/login/login';
import { SignUpPage } from '../pages/authentification/sign-up/sign-up';
import { ValidatePhoneNumberPage } from '../pages/authentification/validate-phone-number/validate-phone-number';
import { IntroductionPage } from '../pages/authentification/introduction/introduction';
import { PermissionsPage } from '../pages/authentification/permissions/permissions';

import { ImageUrlDirective } from '../directives/image-url.directive';
import { MediaUrlDirective } from '../directives/media-url.directive';
import { WavesurferDirective } from '../directives/wavesurfer.directive';
import { GiphyDirective } from '../directives/giphy.directive';

import { CallDurationPipe } from '../pipes/call-duration.pipe';
import { CoordinatesPipe } from '../pipes/coordinates.pipe';
import { HasMultipleMessagesPipe } from '../pipes/hasMultipleMessages.pipe';
import { MapToIterablePipe } from '../pipes/mapToIterable.pipe';
import { ShowDateSeparatorPipe } from '../pipes/showDateSeparator.pipe';
import { SortByPipe } from '../pipes/sort.pipe';
import { EmojiPipe } from '../pipes/emoji.pipe';

import { CalendarPipe } from '../pipes/CalendarPipe';
import { DateFormatPipe } from '../pipes/DateFormatPipe';
import { DurationPipe } from '../pipes/DurationPipe';
import { TimeAgoPipe } from '../pipes/TimeAgoPipe';
import { DifferencePipe } from '../pipes/DifferencePipe';
import { ClearEmojiPipe } from '../pipes/clearemoji.pipe';

import { ElasticTextarea } from '../components/elastic-textarea.component';

export class MyAuthConfig extends CustomConfig {
  loginUrl = 'https://lingu-de7b9.appspot.com/api/session/create';
}

export function translateStaticLoaderFactory(http: any) {
  return new TranslateStaticLoader(http, 'assets/translations', '.json');
}

enableProdMode();

// Set app config

let isCordova: boolean = !!(<any>window).cordova;
let config: any = {
  prodMode: true,
  scrollAssist: false,
  autoFocusAssist: false,
  platforms: {
    core: {
      activator: 'highlight',
      actionSheetEnter: 'action-sheet-slide-in',
      actionSheetLeave: 'action-sheet-slide-out',
      alertEnter: 'alert-pop-in',
      alertLeave: 'alert-pop-out',
      backButtonText: '',
      backButtonIcon: 'ios-arrow-back',
      iconMode: 'ios',
      loadingEnter: 'loading-pop-in',
      loadingLeave: 'loading-pop-out',
      menuType: 'reveal',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      pageTransition: 'ios-transition',
      pageTransitionDelay: 16,
      pickerEnter: 'picker-slide-in',
      pickerLeave: 'picker-slide-out',
      spinner: 'ios',
      tabsHighlight: false,
      tabsLayout: 'icon-top',
      tabsPlacement: 'bottom',
      tabsHideOnSubPages: false,
      toastEnter: 'toast-slide-in',
      toastLeave: 'toast-slide-out'
    },
    ios: {
      backButtonText: '',
      tabsPlacement: 'bottom',
      tabsHideOnSubPages: false
    },
    android: {
      backButtonText: '',
      tabsPlacement: 'top',
      tabsHideOnSubPages: true,
      tabsHighlight: true
    }
  }
};

if (!isCordova) {
  config.mode = 'ios';
}

console.log('config: '+config.mode);

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    TabsSplitPanePage,
    LoginPage,
    SignUpPage,
    ValidatePhoneNumberPage,
    IntroductionPage,    
    VoipPopoverPage,
    VoiceCallModalPage,
    VoipCallModalPage,
    ImageUrlDirective,
    MediaUrlDirective,
    WavesurferDirective,
    GiphyDirective,
    CallDurationPipe,
    CoordinatesPipe,
    HasMultipleMessagesPipe,
    MapToIterablePipe,
    ShowDateSeparatorPipe,
    SortByPipe,
    CalendarPipe,
    DateFormatPipe,
    DurationPipe,
    TimeAgoPipe,
    DifferencePipe,
    EmojiPipe,
    ClearEmojiPipe,
    ElasticTextarea
  ],
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: translateStaticLoaderFactory,
      deps: [Http]
    }),
    Ng2UiAuthModule.forRoot(MyAuthConfig),
    IonicModule.forRoot(MyApp, config)
  ],
  exports: [],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage,
    TabsSplitPanePage,      
    VoipCallModalPage
  ],
  providers: [
    { provide: ErrorHandler, useClass: SentryErrorHandler },    
    Camera,
    File,
    Geolocation,
    InAppBrowser,
    MediaCapture,
    Network,
    SafariViewController,
    SocialSharing,
    SplashScreen
  ]
})
export class AppModule { }

[jgw96]

Hello! So if I'm thinking correctly here since your using the Cordova browser platform isCordova is true when you're running your app in the browser. Could you console.log that variable out and see if that's correct?

[marcelgoya]

Hi @jgw96 , that is correct. I also tried setting the config.mode outside the if, so that the mode is always set to ios, but the effect is the same.

[jgw96]

Hello @marcelgoya , unfortunately, i cannot reproduce your issue. Can you try just putting mode: ios in your actual config object and see if that works for you?

[jgw96]

Hello! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.