Hi,
I’m trying to upload the second version of an app on GooglePlay.

With Cordova the version was in the file config.xml.

With Capacitor in which file should I put the version code?
I thought it was package.json, but it isn’t because GooglePlay says that the app I’m trying to upload has the same version code of the previous.

Thank you very much

cld

2 posts - 1 participant

Read full topic

Hey guys,

I’m totally new to Ionic and I’m already failing to get my first app running on an Android device or emulator. I’m using Angular 9.1.11, Ionic 6.10.1 and Capacitor 2.2.0. I did not more than basically follow the instructions from “build your first app” in the Angular section of the Ionic documentation except leaving out all the photo stuff. I basically did only the setup with the 3 tabs and then tried to deploy on Android. Deploying to Android means:

• I run ionic build (no errors)
• I run npx cap sync android
• I run npx cap open android
• In Android Studio, I start the App on an emulator (Pixel 2 Pie 9.0 - API 28) or my Android phone (Huawei RNE L21 - API 26)
  Then the App starts with the Splash Screen, after the Splash Screen goes away there is only a blank screen. In the browser the App works by the way, I can see the 3 tabs, do changes with live reload, etc. The Android Studio logs in the run tab don’t show any obvious problems. There are a couple of errors, but they don’t seem to be problematic (see below in this post). I also tried remote debugging with Chrome dev tools, which doesn’t show any errors in the console.

I tried to research the problem in the internet, and there is a ton of issues with this blank screen out there. But 98% seems to be with Cordova, not Capacitor, and I’ve found nothing about Ionic 6, only Ionic 3 and 4. Of course I tried a couple of standard things (clean project, invalidate caches) but most of the things I found are just not applicable to my case.

During my research I found another command to use instead of npx cap open android: ionic capacitor run android -l --external. When I do that, then everything works. The app loads as it should, on my phone and in the emulator as well. I compared the output in the run tab of Android Studio, and I don’t see any meaningful differences. But that could just be me having no idea about Ionic, Capacitor and Android as well.
I can’t test on IPhone by the way, because I don’t have a Mac at hand. I’m developing on a Windows 10 computer if that matters.

Please find here the logs from Android Studio run tab in case they are of any interest.
First the ones from the app running on the emulator opening Android Studio with the npx cap open android command (where only blank screen occurs after Splash Screen):

2 posts - 1 participant

Read full topic

Hi all,

i am pretty new to ionic mobile development. i have a ion-select with yes and no buttons. i want to change the ok-text and cancel-text property dynamically. i tried property binding like <ion-select ok-text="{yes_lbl}" cancel-text="{no_lbl}"

but im getting error.

please help me solve this issue.

appreciate all your help.

1 post - 1 participant

Read full topic

Hello,
I’m currently trying to use two ion-split-components in different pages but showing at the same time (located both sides start and end) of course if there is enough room for both of them.
The main split-pane is located in home.page at start side, the other one in secondary.page at end side.
The pages are related as: home.page (the parent) and secondary.page (child of the home.page’s child).

There is a strange behavior between both split-panes. In desktop version:

1. Being at home and i navigate to secondary.page, it loads the page and shows its splitpane but the main split pane (the one in the home.page) disappears.
2. If I reload the secondary.page both split-panes are visible correctly, but when i decrease the window’s width, they both disappears when the first one disappears (they have different when property).
3. When i reload the secondary.page with a window’s width small enough for both splitpanes are not-visible. Then i increase the width, the second split pane appears correctly. If i keep increasing the window’s width the main split pane appears but the secondary hides.

I’m using Ionic-CLI 6.10.1 and Angular 9.1.9

I’ve put an example code in Github hoping you can help me to figure out what am i missing or it is a bug.
https://github.com/nicolasturen/two-ion-split-panes

I’ve placed a button on the main menu. If you click at it you will see the behavior #1 right away.

Greetings.

1 post - 1 participant

Read full topic

Currently, I have been working on upgrading my current Ionic Cordova application from Ionic 3 to Ionic 5. In the process, the Angular routing has been throwing many errors and I was able to resolve most of them but when I try to change the root page for the application I always end up with a blank screen. I tried many online solutions but they did not work for me. Originally I tried the lazy loading method for all my pages but I found that it is a poor method so I changed it with direct imports. Currently, this is my app module:

@NgModule({
    declarations: [MyAppPage,
    ],
    entryComponents: [MyAppPage],
    imports: [BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        IonicSignaturePadModule,
        IonicModule.forRoot()],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        ApiService,
        Device,
        Camera,
        InAppBrowser,
        FingerprintAIO,
        LocalNotifications,
        Contacts,
        BackgroundMode,
        Keyboard,
        Firebase,
        Badge,
        HttpClient,
        IonicsignaturepadProvider,
    ],
    bootstrap: [MyAppPage],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule {}

This is my app routing file:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {APP_BASE_HREF} from '@angular/common';
import {AuthPageModule} from './auth/auth.module';
import {CareTeamPageModule} from './care-team/care-team.module';
import {CommunitiesPageModule} from './communities/communities.module';
import {DashboardPageModule} from './dashboard/dashboard.module';
import {FaqPageModule} from './faq/faq.module';
import {ForgotPasswordPageModule} from './forgot-password/forgot-password.module';
import {ForgotUsernamePageModule} from './forgot-username/forgot-username.module';
import {FriendsPageModule} from './friends/friends.module';
import {HcsPageModule} from './hcs/hcs.module';
import {HistoryPageModule} from './history/history.module';
import {LoginPageModule} from './login/login.module';
import {MedicineDetailPageModule} from './medicine-detail/medicine-detail.module';
import {MedicinesPageModule} from './medicines/medicines.module';
import {NotificationsPageModule} from './notifications/notifications.module';
import {PrivacyPageModule} from './privacy/privacy.module';
import {ProfilePageModule} from './profile/profile.module';
import {SettingsPageModule} from './settings/settings.module';
import {SignupPageModule} from './signup/signup.module';
import {TermsPageModule} from './terms/terms.module';
import {WearablesPageModule} from './wearables/wearables.module';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginPageModule
  },
  {
    path: 'auth',
    component: AuthPageModule,
  },
  {
    path: 'care-team',
    component: CareTeamPageModule
  },
  {
    path: 'communities',
    component: CommunitiesPageModule
  },
  {
    path: 'dashboard',
    component: DashboardPageModule
  },
  {
    path: 'faq',
    component: FaqPageModule
  },
  {
    path: 'forgot-password',
    component: ForgotPasswordPageModule
  },
  {
    path: 'forgot-username',
    component: ForgotUsernamePageModule
  },
  {
    path: 'friends',
    component: FriendsPageModule
  },
  {
    path: 'hcs',
    component: HcsPageModule
  },
  {
    path: 'history',
    component: HistoryPageModule
  },
  {
    path: 'medicine-detail',
    component: MedicineDetailPageModule
  },
  {
    path: 'medicines',
    component: MedicinesPageModule
  },
  {
    path: 'notifications',
    component: NotificationsPageModule
  },
  {
    path: 'privacy',
    component: PrivacyPageModule
  },
  {
    path: 'profile',
    component: ProfilePageModule
  },
  {
    path: 'settings',
    component: SettingsPageModule
  },
  {
    path: 'signup',
    component: SignupPageModule
  },
  {
    path: 'terms',
    component: TermsPageModule
  },
  {
    path: 'wearables',
    component: WearablesPageModule
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: true, useHash: true }),
    AuthPageModule,
    CareTeamPageModule,
    CommunitiesPageModule,
    DashboardPageModule,
    FaqPageModule,
    ForgotPasswordPageModule,
    ForgotUsernamePageModule,
    FriendsPageModule,
    HcsPageModule,
    HistoryPageModule,
    LoginPageModule,
    MedicineDetailPageModule,
    MedicinesPageModule,
    NotificationsPageModule,
    PrivacyPageModule,
    ProfilePageModule,
    SettingsPageModule,
    SignupPageModule,
    TermsPageModule,
    WearablesPageModule,
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }, ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the app component:

import {Component, ViewChild} from '@angular/core';
import { NavController, Platform, ToastController, MenuController} from '@ionic/angular';
import { Router } from '@angular/router';
import {DashboardPage} from './dashboard/dashboard.page';
import {MedicinesPage} from './medicines/medicines.page';
import {CareTeamPage} from './care-team/care-team.page';
import {HcsPage} from './hcs/hcs.page';
import {SettingsPage} from './settings/settings.page';
import {CommunitiesPage} from './communities/communities.page';
import {FaqPage} from './faq/faq.page';
import {WearablesPage} from './wearables/wearables.page';

import {NotificationsPage} from './notifications/notifications.page';

import {FriendsPage} from './friends/friends.page';

import {Keyboard} from '@ionic-native/keyboard/ngx';

import {ApiService} from './services/app.services';
import {BackgroundMode} from '@ionic-native/background-mode/ngx';

import {Firebase} from '@ionic-native/firebase/ngx';

import {Badge} from '@ionic-native/badge/ngx';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

@Component({
    templateUrl: 'app.component.html',
    selector: 'app-root',
})
export class MyAppPage {
    @ViewChild(NavController) nav: NavController;

    backButtonPressedOnceToExit: any;
    menu: any;
    document: any;
    pages: Array<{ title: string, component: any, icon: string }>;
    hideWaves: boolean;
    bgInterval: any;
    config: {
        scrollAssist: false,
        autoFocusAssist: false
    };

    constructor(public platform: Platform,
                public splashScreen: SplashScreen,
                private toastCtrl: ToastController,
                private route: Router,
                // tslint:disable-next-line:no-shadowed-variable
                private ApiService: ApiService,
                public menuCtrl: MenuController,
                private keyboard: Keyboard,
                private backgroundMode: BackgroundMode,
                private fcm: Firebase,
                private badge: Badge
    ) {
        this.initializeApp();

        this.hideWaves = false;

        // used for an example of ngFor and navigation
        this.pages = [
            {title: 'Today\'s Meds', component: DashboardPage, icon: 'assets/imgs/menu-today-med.png'},
            {title: 'Medicines', component: MedicinesPage, icon: 'assets/imgs/menu-medicine.png'},
            {title: 'Healthcare Providers', component: CareTeamPage, icon: 'assets/imgs/menu-care-team.png'},
            {title: 'Invite Friends', component: FriendsPage, icon: 'assets/imgs/menu-friends.png'},
            {title: 'Communities', component: CommunitiesPage, icon: 'assets/imgs/menu-communities.png'},
            {title: 'Connect to healthcare systems', component: HcsPage, icon: 'assets/imgs/menu-hcs.png'},
            {title: 'Devices / Wearables', component: WearablesPage, icon: 'assets/imgs/menu-wearables.png'},
            {title: 'Notifications', component: NotificationsPage, icon: 'assets/imgs/menu-notification.png'},
            {title: 'Settings', component: SettingsPage, icon: 'assets/imgs/menu-setting.png'},
            {title: 'Help & Support', component: FaqPage, icon: 'assets/imgs/menu-help.png'}
        ];

        if (localStorage.getItem('userToken')) {
            this.route.navigate(['auth']);
        }else{
            this.route.navigate(['login']);
        }

    }

    initializeApp() {
        this.platform.ready().then(() => {

            // Clear badge
            this.badge.clear();
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            // this.statusBar.styleDefault();
            this.splashScreen.hide();
            // this.backgroundMode.enable();
            // this.keyboard.onKeyboardShow().subscribe( (value)=>{
            //   this.hideWaves = true;
            // });

            // this.keyboard.onKeyboardHide().subscribe( (value)=>{
            //   this.hideWaves = false;
            // });

            // this.platform.registerBackButtonAction(() => {
            //   if (this.backButtonPressedOnceToExit) {
            //     this.platform.exitApp();
            //   } else if (this.nav.canGoBack()) {
            //     this.nav.pop({});
            //   } else {
            //     this.menu.close(); //Close menu if open
            //     this.showToast();
            //     this.backButtonPressedOnceToExit = true;
            //     setTimeout(() => {
            //       this.backButtonPressedOnceToExit = false;
            //     },2000)
            //   }
            // });
        });
    }

    logout() {
        this.menuCtrl.close();
        this.menuCtrl.get().then((menu: HTMLIonMenuElement) => {
          menu.swipeGesture = false;
        });
        this.ApiService.showToast('Logged Out');
        localStorage.removeItem('userId');
        localStorage.removeItem('userToken');
        localStorage.removeItem('userDetails');
        localStorage.removeItem('userNotifications');
    }

    profile() {
        this.menuCtrl.close();
        this.route.navigateByUrl('/profile');
    }

  async showToast() {
        const toast = await this.toastCtrl.create({
            message: 'Press Back Again To Exit The App',
            duration: 3000,
            position: 'bottom'
        });
        toast.present();
    }

    openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.navigateRoot(page.component);
    }
}

app.component.html:

<ion-menu [attr.content]="content" type="overlay" contentId="main">
<!--   <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
 -->
  <ion-content>
    <div class = "menu-header">
    </div>
    <div class="ion-text-center center-content relative" (click) = "profile()">
      <img id = "userPicture" alt = "" src = "assets/imgs/user-default.png" />
      <div class = "profile-edit">
        <div class="ion-text-center">
          <img alt = "" src = "assets/imgs/camera_green.png" />
        </div>
      </div>
    </div>
    <ion-list class = "menu-list">
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <img [src] = "p.icon" item-left />
        {{p.title}}
      </button>
    </ion-list>
    <div class="ion-text-right logout" (click) = "logout()">
      Logout
    </div>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-app>
<router-outlet></router-outlet>
</ion-app>

login page routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { LoginPage } from './login.page';

const routes: Routes = [
  {
    path: '',
    component: LoginPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes),
            IonicModule,
            CommonModule,
            FormsModule],
  exports: [RouterModule],
})
export class LoginPageRoutingModule {}

login.page.ts:

import { Component, OnInit } from '@angular/core';
import { NavController, Platform, NavParams, MenuController } from '@ionic/angular';
import {Routes, RouterModule, Router, ActivatedRoute} from '@angular/router';

import { ApiService } from '../services/app.services';
import { LoadingController } from '@ionic/angular';
import {NavigationExtras} from '@angular/router';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
  providers: [NavParams]
})
export class LoginPage implements OnInit {
  public navParams: NavParams;
  loginState: string;
  user: any;
  loading: any;
  hideWaves: boolean;
  origCode: number;
  showForgotPassword: boolean;
  userMobile: number;
  passwordType = 'password';
  passwordIcon = 'eye-off';
  constructor(private route: Router,
              public navCtrl: NavController,
              public statusBar: StatusBar,
              private loadingCtrl: LoadingController,
              private ApiService: ApiService,
              public menuCtrl: MenuController,
              public platform: Platform,
              private actRoute: ActivatedRoute,
  ) {
      this.loginState = 'init';
      this.showForgotPassword = false;
      this.user = {};
      this.actRoute.queryParams.subscribe(params => {
        if (route.getCurrentNavigation().extras.state) {
          this.loginState = route.getCurrentNavigation().extras.state.item;
        }
      });
      this.menuCtrl.get().then((menu: HTMLIonMenuElement) => {
        menu.swipeGesture = false;
      });
      this.statusBar.backgroundColorByHexString('#000000');
      this.statusBar.styleLightContent();
    }


  ngOnInit() {
    this.platform.ready().then(() => {
      // let video = this.mVideoPlayer.nativeElement;
      // video.src = "assets/video/clinakos_video.mp4";
      // video.load();
    });
  }

  ionViewWillLeave() {
    // the .nativeElement property of the ViewChild is the reference to the tag <video>
    // this.mVideoPlayer.nativeElement.src = '';
    // this.mVideoPlayer.nativeElement.load();
  }

  signUp() {
    this.navCtrl.navigateRoot('/signup');
  }

  signIn() {

    if ( (this.user.username) && (this.user.password) ) {

      this.loading = this.loadingCtrl.create({
        message: 'Please wait...'
      });
      this.loading.present();

      this.ApiService.login(this.user)
      .then(r => {
        localStorage.setItem('userToken', r.token);
        localStorage.setItem('userId', r.userId);

        // Check if user has reminders.
        this.ApiService.getReminders()
        .then(r => {
          this.loading.dismiss();
          this.navCtrl.navigateRoot('/dashboard');
          this.ApiService.showToast('Logged In');
        })
        .catch(e => {
          this.navCtrl.navigateRoot('/medicines');
          this.loading.dismiss();
          this.ApiService.showToast('Logged In');
        });



        this.menuCtrl.enable(true);
        this.menuCtrl.get().then((menu: HTMLIonMenuElement) => {
          menu.swipeGesture = true;
        });

        if (localStorage.getItem('userNotifications') === null) {
          localStorage.setItem('userNotifications', JSON.stringify([]));
        }

      })
      .catch(e => {
        console.log (e);
        if (e.status == '404') {
          this.ApiService.showToast('User does not exist');
        }
        if (e.status == '400') {
          this.ApiService.showToast('Invalid credentials');
          this.showForgotPassword = true;
        }
        this.loading.dismiss();
      });
    } else {
      this.ApiService.showToast('Please enter username and password');
    }

  }

  terms() {
    this.navCtrl.navigateForward('/terms');
  }

  privacy() {
    this.navCtrl.navigateForward('/privacy');
  }

  navigateForgotPasswd() {
    const navigationExtras: NavigationExtras = { state: { user: this.user } };
    this.navCtrl.navigateForward('/forgot-password', navigationExtras);
  }

  navigateForgotUserName() {
    const navigationExtras: NavigationExtras = { state: { user: this.user } };
    this.navCtrl.navigateForward('/forgot-username', navigationExtras);
  }

  hideShowPassword() {
    this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
    this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
  }

}

This is the login-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { LoginPage } from './login.page';

const routes: Routes = [
  {
    path: '',
    component: LoginPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes),
            IonicModule,
            CommonModule,
            FormsModule],
    entryComponents: [LoginPage],
  exports: [RouterModule],
})
export class LoginPageRoutingModule {}

This is the error I am receiving when the app tries to startup and move to the login page:

"error: Error: No component factory found for LoginPageModule. Did you add it to @NgModule.entryComponents?)"

3 posts - 2 participants

Read full topic

After executing

ionic build --prod
# or
ionic cordova build browser --prod

and after uploading the files located in www or cordova/platforms/browser/www …

How to deploy, correctly, these files? It happens that after uploading them, the PWA does not update automatically, and the ServiceWorker checker does not catch it.

Should I update all files? Including:

• index.html
• ngsw.json
• manifiest.json

What do I do with the old “ng hashed files”? Do I erase them? i.e.:

• 98-es5.47b01e7ba6bbd8f8658e.js
• common-es5.1719b2b4dbadb25c2d74.js
• runtime-es5.d9ee687d05b6194a4b29.js
• main-es5.6c81c313ff50eb0e9515.js

I am serving the files with an Apache + PHP, and the .htaccess configuration contains:

• Redirection of requests to index.html

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Redirection to HTTPS:
  RewriteCond %{HTTPS} !on
  RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
  
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule (.*) index.html [NC,L]
</IfModule>

• Disable browser caching for all files that don’t get a hash string by Angular ← Is this necessary and useful? (I currently put this part out as a comment)

<FilesMatch "^(?!.*\.([0-9a-z]{20})\.).*$">
  <IfModule mod_headers.c>
    FileETag None
    Header unset ETag
    Header unset Pragma
    Header unset Cache-Control
    Header unset Last-Modified
    Header set Pragma "no-cache"
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Expires "Mon, 10 Apr 1972 00:00:00 GMT"
  </IfModule>
</FilesMatch>

Also, in the src/app.component.ts I have the service worker check:

async ngOnInit() {
    this.swUpdate.available.subscribe(async res => {
      const toast = await this.toastCtrl.create({
        message: 'Update available!',
        position: 'bottom',
        buttons: [{ role: 'cancel', text: 'Reload' }]
      });
      await toast.present();
      toast
        .onDidDismiss()
        .then(() => this.swUpdate.activateUpdate())
        .then(() => window.location.reload());
    });
    this.swUpdate.checkForUpdate();
    setInterval(() => {
      this.swUpdate.checkForUpdate();
    } , 15 * 60 * 1000);
  }

What’s wrong? Why isn’t my PWA updating immediately or never update?

1 post - 1 participant

Read full topic

I have routing setup like this…

        <IonRouterOutlet id="main">
          <Route path="/home" component={Home} exact />
          <Route path="/birthday/new" component={AddBirthday} exact />
          <Route path="/birthday/edit/:id" component={EditBirthday} exact />
          <Route path="/birthday/:id" component={ViewBirthday} exact />
          <Route path="/account/create" component={CreateAccount} exact />
          <Route path="/login" component={Login} exact />
          <Route path="/about" component={About} exact />
          <Route path="/contact" component={Contact} exact />
          <Redirect exact from="/" to="/home" />
        </IonRouterOutlet>

When a page is in an IonRouterOutlet , the container controls the transition animation between the pages as well as controls when a page is created and destroyed, which helps maintain the state between the views when switching back and forth between them. – source

So if I’m editing a birthday (EditBirthday), and then go to the page for viewing a birthday (ViewBirthday), and then delete that same birthday… then I have an error thrown because the EditBirthday page’s data for that deleted birthday is no longer accessible.

A snippet of the EditBirthday page looks like this…

const UpdateBirthday = ({ history, match }) => {
  const { state } = useContext(AppContext);
  const birthday = state.birthdays[match.params.id];

  const [error, setError] = useState();
  const [name, setName] = useState(birthday.name);
  const [day, setDay] = useState(birthday.dob.day);
  const [month, setMonth] = useState(birthday.dob.month.toString());
  const [year, setYear] = useState(birthday.dob.year);
  const [notes, setNotes] = useState(birthday.notes);
  const [updateClicked, setUpdateClicked] = useState(false);

birthday becomes undefined, so accessing properties of it throws a TypeError.

So what I really need is for the EditBirthday page to not save state between views. Or how do I actually destroy a page like this one once done with it?

Thanks

1 post - 1 participant

Read full topic

1 post - 1 participant

Read full topic

I’m having a problem with a newly created app using Ionic 5. I’m simply trying to use my own custom colors in the variables.scss file, but the colors I add are always overriden by core.scss. core.scss uses the !important attribute and is included last on the rendered page so my styles always get overridden. Am I not understanding something or might this be a bug?

1 post - 1 participant

Read full topic

Hi i’m New to ionic

Screenshot (11)327×577 76.9 KB

in this i should get 2/400
where i’m extracting 2 from Product title and
400 from Product Price
How can i Get … this Sum

1 post - 1 participant

Read full topic

salut comment je peut utiliser un theme que j’ai acheter pour creer un application svp
je suis qu’un debutant

1 post - 1 participant

Read full topic

I am using fcm plugin for ionic app notifications.but not able to get sound on notifications received. I am using PHP APIs for fcm push notifications.please help me asap.

1 post - 1 participant

Read full topic

We have added custom rules in Azure WAF using geocoding to block API requests from certain countries. The custom error code and message are set in WAF. But when the requests are being blocked we are receiving CORS error. We have handled CORS in server side, but in this case the request is getting bounced back from WAF, before reaching the server. Is there a way to add custom response header in WAF, when the request is being blocked or can we handle this from Ionic by bypassing the preflight request?

Screen Shot 2020-07-01 at 11.29.21 AM1303×224 49.8 KB

1 post - 1 participant

Read full topic

I have this piece of code:

  loadmwfuthtft(){
  	let body = {
  		keyword : 'mwfuthtft'
  	};
  	this.postPvdr.postData(body, 'http:/siteaddress').subscribe(data => {
  		for(let mwfuthtftres of data.result){
  			this.mwfuthtftresed.push(mwfuthtftres);
  		}
  	});
  }

  doRefresh(refresher) {
  	let body = {
  		keyword : 'mwfuthtft'
  	};
  	this.postPvdr.postData(body, 'http://www.siteaddress').subscribe(data => {
  		for(let mwfuthtftres of data.result){
  			this.mwfuthtftresed.push(mwfuthtftres);
  		}
  		refresher.complete();
  	});
  }

i can get data in loadmwfuthtft function successfully but when i use same code for ion-refresh page content doesn’t update. What is the correct way to refresh page content?

2 posts - 2 participants

Read full topic

I’m currently working on a project (Ionic / Angular) that involves a custom camera interface and capturing lots of photos. We’re mainly using it in the browser (e.g. Safari on iOS / Chrome on Android) rather than the compiled app if that makes any difference.

We generally are seeing lots of issues with crashes and memory, especially after capturing 50+ photos (not uncommon in our use case).

Does anyone have any general advice on handling lots of photos and camera usage?
Is this possible / recommended for Ionic or are we fighting a losing battle? Switching to
Are there any other Ionic apps out there doing lots of image capturing that we should take a look at?

Thanks!

1 post - 1 participant

Read full topic

I have a guard that redirects the user to tabs page if user has been authenticated else redirects to home (login) page.

Now on a particular operation, my backend express server redirects the user to order-success page. But logic in the guard doesn’t allow the user to be redirected to order-success page instead user gets redirected to tabs page

So how to bypass this url in the guard so that user will go to order-success page

Thank you in advance

auth.guard.ts

export class AuthGuard implements CanActivate   {
  
  constructor(public auth: AuthenticationService, public router : Router,) {}

  async canActivate(): Promise<boolean> {

    let auth = await this.auth.isAuthenticated() // returns true if user is authenticated else false
    if(auth) {
      return true;
    }
    else {
      this.router.navigate(['home'])
      return false;
    }
  }
}

app-routing.module.ts

{ path: '', redirectTo: 'tabs', pathMatch: 'full' },

{
    path: 'tabs', canActivate: [AuthGuard],
    loadChildren: () => import('./pages/tabbar/tabbar.module').then( m => m.TabbarPageModule)
  },

  {
    path: 'order-success',
    loadChildren: () => import('./pages/order-success/order-success.module').then(m => m.OrderSuccessPageModule)
  },

1 post - 1 participant

Read full topic

Hi,

I’m trying to use the Angular Material Tooltip ( https://v9.material.angular.io/components/tooltip/overview ) on an Ionic 5 app.

The problem is that when I use it on a button leading to a second page, the tooltip doesn’t disappear.

<ion-button 
        matTooltip="Tooltip text" 
        [routerLink]="['/about']">About
</ion-button>

Does some one know how to solve this issue ?
Thanks,

Ionic CLI : 6.10.1
Ionic Framework : @ionic/angular 5.2.2
@angular-devkit/build-angular : 0.901.9
@angular-devkit/schematics : 9.1.9
@angular/cli : 9.1.9
@ionic/angular-toolkit : 2.2.0

1 post - 1 participant

Read full topic

Hello,
I am new to JS, I have set up a switch for a crosstab but when I make a choice I have 3 displays in my console.
How to just have the choice ask.

Thank you in advance.

calcul.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calcul',
  templateUrl: './calcul.page.html',
  styleUrls: ['./calcul.page.scss'],
})
export class CalculPage implements OnInit {

  intensity: any;
  poid: number;

  constructor() {
  }

  ngOnInit() {
  }
  calculTaux() {
    switch (this.intensity === "faible") {
      case (this.poid <= 11):
        console.log("faible 1")
        break;
      case (this.poid > 11 && this.poid <= 20):
        console.log("faible 2")
        break;
      case (this.poid > 21 && this.poid <= 40):
        console.log("faible 3")
        break;
      case (this.poid > 41 && this.poid <= 70):
        console.log("faible 4")
        break;
      case (this.poid > 71 && this.poid <= 110):
        console.log("faible 5")
        break;
      case (this.poid > 110):
        console.log("faible 6")
        break;
      default:
        console.log("Nous consulter")
        break;
    }
    switch (this.intensity === "moyen") {
      case (this.poid <= 11):
        console.log("moyen 1")
        break;
      case (this.poid > 11 && this.poid <= 20):
        console.log("moyen 2")
        break;
      case (this.poid > 21 && this.poid <= 40):
        console.log("moyen 3")
        break;
      case (this.poid > 41 && this.poid <= 70):
        console.log("moyen 4")
        break;
      case (this.poid > 71 && this.poid <= 110):
        console.log("moyen 5")
        break;
      case (this.poid > 110):
        console.log("moyen 6")
        break;
      default:
        console.log("Nous consulter")
        break;
    }
    switch (this.intensity === "forte") {
      case (this.poid <= 11):
        console.log("forte 1")
        break;
      case (this.poid > 11 && this.poid <= 20):
        console.log("forte 2")
        break;
      case (this.poid > 21 && this.poid <= 40):
        console.log("forte 3")
        break;
      case (this.poid > 41 && this.poid <= 70):
        console.log("forte 4")
        break;
      case (this.poid > 71 && this.poid <= 110):
        console.log("forte 5")
        break;
      case (this.poid > 110):
        console.log("forte 6")
        break;
      default:
        console.log("Nous consulter")
        break;
    }
  }
}

calcul.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>calcul</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
    <h1>Calculer mon besoin personnel</h1>
    <p>Nous allons éstimer un dosage moyen quotidien</p>
    <ion-label position="floating">Quel est votre poids?</ion-label>
    <ion-input [(ngModel)]="poid" type="number" placeholder="Saisir ici"></ion-input>
    <ion-list>
      <ion-radio-group [(ngModel)]="intensity">
        <ion-list-header>
          <ion-label>Quel est l'intensité de vos douleurs?</ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label>Faibles</ion-label>
          <ion-radio slot="start" value="faible"></ion-radio>
        </ion-item>

        <ion-item>
          <ion-label>Moyennes</ion-label>
          <ion-radio slot="start" value="moyen"></ion-radio>
        </ion-item>

        <ion-item>
          <ion-label>Fortes</ion-label>
          <ion-radio slot="start" value="forte"></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>
    <ion-button (click)="calculTaux()" expand="block" fill="clear" shape="round">
      Calculer mon taux
    </ion-button>
  </div>

</ion-content>

Captureapp1448×546 30.5 KB

1 post - 1 participant

Read full topic

I have a ionic app. I want to embed a third party application which is developed by our known vendor. I need to retain my application header and footer which is very important. I did a initial research on below options but it has some limitations

1. in-app browser - Not able to retain my app header and footer and it occupies entire webview or opens in seperate window
2. iframe - Able to achieve what I needed, but I am not sure if it is the right approach. Heard that there is possibility that ios does not allow app in app store if app uses iframe
3. webview - Ionic app already run on a webview, but there is no option provided to have a child webview / nested view to load external url (am i missing something?)

Is there any other right/clean approach, which i can use to embed a third party webpage in my mobile application. Or can i proceed with iframe without any issues?. Please advise.

1 post - 1 participant

Read full topic

Which method can I use instead of the event used in ionic-v3 ?

// send

//receive

3 posts - 3 participants

Read full topic