Hello

I’m having a very strange issue. I have code in my initializeApp() method that takes care of some configurations like ignoring native font zooming, disabling screen rotation, some statusbar configurations, etc. I’m also fetching some data from my backend.

When I open the app on my physical android device after running ‘ionic cap sync’ everything works fine. But after bundling my app and publishing it in the PlayStore nothing happens on the same device. No splashscreen, no data, no configurations, nothing. It seems like the function is getting ignored? I have no clue why. Here is the code in initializeApp():

initializeApp(): void {
      this.platform.ready().then(async () => {
         if (this.platform.width() > 500) {
            this.usingLargeDevice = true;
         }

         this.previousRouteService.init();

         const info = await Device.getInfo();

         if (info.platform !== 'web') {
            const hasCompletedTutorial = await this.appSettingsService.hasCompletedTutorial();
            if (!hasCompletedTutorial) {
               this.router.navigate(['/intro']);
            }

            if (!await this.appSettingsService.isReloadingAppAfterExitingTutorial()) {
               // show custom splashscreen
               this.showingSplash = true;
            }

            // disable screen rotation
            this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);

            // ignore native font zooming
            this.mobileAccessibility.setTextZoom(100);
            this.mobileAccessibility.updateTextZoom();
            this.mobileAccessibility.usePreferredTextZoom(false);

            StatusBar.setOverlaysWebView({
               overlay: true
            });
            StatusBar.setStyle({
               style: StatusBarStyle.Light
            });

            this.oneSignal.startInit(environment.oneSignal.appId, environment.oneSignal.googleProjectNumber);
            this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.Notification);
            this.oneSignal.endInit();

            // hide default splashscreen
            this.splashScreen.hide();

            // hide custom splashscreen after 3 seconds
            timer(3000).subscribe(() => {
               this.showingSplash = false;
            });
         }

         this.divisionService.setDivisionPreviewModels();
      });
   }

Thanks in advance!

Update:

Added some toasts to test the signed apk. It seems like the ‘this.platform.ready().then(async () => {}’ is never hit after signing the app. Any suggestions?

2 posts - 1 participant

Read full topic

Guys I’m having this error in my code

Error: Uncaught (in promise): TypeError: Cannot read property 'undefined' of undefined
TypeError: Cannot read property 'undefined' of undefined
    at ConteudoPage.webpackJsonp.271.ConteudoPage.ngAfterContentInit (http://localhost:8100/build/main.js:4315:40)
    at callProviderLifecycles (http://localhost:8100/build/vendor.js:12776:18)
    at callElementProvidersLifecycles (http://localhost:8100/build/vendor.js:12753:13)
    at callLifecycleHooksChildrenFirst (http://localhost:8100/build/vendor.js:12737:17)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13865:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14212:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14144:13)
    at Object.checkAndUpdateView (http://localhost:8100/build/vendor.js:13868:5)
    at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11654:18)
    at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/vendor.js:54175:40)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
    at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:53938:16)
    at NavControllerBase._failed (http://localhost:8100/build/vendor.js:53931:14)
    at http://localhost:8100/build/vendor.js:53978:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4983:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242

I am finding the error in this line of code, the error is being found in this IF, could someone help me?

ngAfterContentInit(){ console.log('Carregando After') this.loading.present();

this.events.subscribe('aulaConteudo:loadingVideo', () =>{
  this.exibirConteudo = false;
  let monitor:HTMLDivElement = this.content._elementRef.nativeElement.querySelector('.monitor');
  monitor.style.visibility = 'hidden';
});

 console.log(this.navParams)
 this.aula = this.navParams.data.aula;
 this.aulaOrdem = this.navParams.data.aulaOrdem;
 this.moduloOrdem = this.navParams.data.moduloOrdem;
 this.cursoId = this.navParams.get('cursoId');
 this.usuario = this.navParams.get('usuario');
 this.tituloCurso =  "teste"; //this.aula.tituloCurso;
 this.paginasTotal = 8;

 if (this.aulaOrdem == 1 && this.moduloOrdem == 1) {
   this.prev = true;
 }

 if (this.aulaOrdem == this.aula[this.moduloOrdem].aulas.length - 1 && this.moduloOrdem == this.aula.length - 1) {
   this.next = false;
 } `

2 posts - 2 participants

Read full topic

Hello everyone,

I created a demo repository to demonstrate the issue.

This app has basically two routes/views:

• /home → Contains a button “start” that navigates to /step/step1 upon click.
• /step/{id} → Is a view that is rendered based on the url parameter :id. It contains three buttons:
  • Home → Go back to /home
  • Back → Navigate back in the browser history
  • Forward → Go to the next step, e.g. /step/step2

Starting at /home and navigating just in forward directions by clicking “start” and then the “next” buttons works fine. However:

• No animations when navigating from one dynamically rendered view to another, e.g. /step/step1 to /step/step2. They appear only when navigating to/from /home.
• Navigating back from any of the dynamic views (/step/stepX) to the static home view (/home) seems to work, but creates a lot of exceptions. It appears to me that even though we succesfully navigate back to the /home route the “Step” component where we are coming from is tried to be rendered, which obviously fails.

I would highly appreciate your help, thank you!

2 posts - 2 participants

Read full topic

Yo devs,
I’m struggle with passing some data through Events while transition from one page to another:

export class Page1 implements OnInit {
  constructor(
    public events: EventsService
  ) {
    events.subscribe('appointment:test', (data: any) => {
        console.log(data)
    });
  }

Of course I tried to put subscription inside ngOnInit and ionViewDidEnter

export class Page2 implements OnInit {
  constructor(
    public events: EventsService
  ) {}

  goBack() {
    let data = { test: 'test' }
    this.events.publish('appointment:test', data);
    this.navCtrl.navigateBack('page1');
  }

Here I also tried to put publishing in ionViewDidLeave

I know that I can pass data through navigation but that way worked in previous Ionic version, would be nice to know why it not works anymore

Also I’m sure that Events are working, when I publish while being on the same page works perfectly fine…

Thanks for any suggestion

2 posts - 2 participants

Read full topic

I am trying to use the command,

ionic serve --host=192.168.75.16

I am reeving the following error

> ng run app:serve --host=192.168.75.16 --port=8100
[ng] An unhandled exception occurred: listen EADDRNOTAVAIL: address not available 192.168.75.16:8100
[ng] See "/tmp/ng-NjNf29/angular-errors.log" for further details.

[ERROR] ng has unexpectedly closed (exit code 127).
        
        The Ionic CLI will exit. Please check any output above for error details.

Here is my ionic info

Ionic:

   Ionic CLI                     : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1100.4
   @angular-devkit/schematics    : 10.0.6
   @angular/cli                  : 10.0.6
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI      : 3.0.0
   @capacitor/android : 3.0.0
   @capacitor/core    : 3.0.0
   @capacitor/ios     : not installed

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run                             : 1.3.0

System:

   NodeJS : v12.16.3 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : Linux 5.3

5 posts - 2 participants

Read full topic

I am struggling with the first app “photo-gallery” and would love some help!

import { Injectable } from '@angular/core';
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Storage } from '@capacitor/storage';

public async addNewToGallery(){
  let capturedPhoto: Photo;
  capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
  });
}

@Injectable({
  providedIn: 'root'
})

export class PhotoService {

  constructor() { }
}

My error I keep getting is this:
Error: src/app/services/photo.service.ts:6:1 - error TS1128: Declaration or statement expected.

6 public async addNewToGallery(){

Error: src/app/services/photo.service.ts:6:8 - error TS2304: Cannot find name 'async'.

6 public async addNewToGallery(){
       ~~~~~

Error: src/app/services/photo.service.ts:6:14 - error TS1005: ';' expected.

6 public async addNewToGallery(){
             ~~~~~~~~~~~~~~~

Error: src/app/services/photo.service.ts:6:14 - error TS2304: Cannot find name 'addNewToGallery'.

6 public async addNewToGallery(){
             ~~~~~~~~~~~~~~~

Error: src/app/services/photo.service.ts:6:31 - error TS1005: ';' expected.

6 public async addNewToGallery(){
                              ~
Error: src/app/tab2/tab2.page.ts:14:23 - error TS2339: Property 'addNewToGallery' does not exist on type 'PhotoService'.

14     this.photoService.addNewToGallery();

_________________________________________________

I've done everything pretty much cut and paste from the tutorial. Any thoughts?

2 posts - 2 participants

Read full topic

When i try to import Camera or plugins from capacitor gives me a error saying that “plugin is depreciated”
and its no longer used in V4 so how would i solved this? i tried to use @capicitor/core instead it still didnt work

2 posts - 2 participants

Read full topic

I cannot install the Facebook plugin. what am i doing wrong.

1. First i did this:
   D:\apps\vgs>ionic cordova plugin add cordova-plugin-facebook-connect --variable APP_ID=“123456” --variable APP_NAME=“xyz-app”
   [ERROR] Refusing to run ionic cordova plugin inside a Capacitor project.

    In Capacitor projects, Cordova plugins are just regular npm dependencies.
   
    - To add a plugin, use npm i cordova-plugin-facebook-connect
    - To remove, use npm uninstall cordova-plugin-facebook-connect
   

2. Second i did this:
   D:\apps\vgs>npm i cordova cordova-plugin-facebook-connect --variable APP_ID=“123456” --variable APP_NAME=“xyz-app”

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name “APP_ID=123456”: Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Marten\AppData\Roaming\npm-cache_logs\2021-05-27T06_16_44_625Z-debug.log

I use Ionic 5 with Capacitor

Is the Facebook SKD only available for Cordova? How can I implement Facebook SDK with Capacitor 2? I want to use it for App Tracking. Not just for login.

1 post - 1 participant

Read full topic

 <ion-select class="border" interface="popover"  placeholder="Qualify Status"  [(ngModel)]="status_value" #status name="status" (ionChange)="getStatus(status_value)" >
          <ion-select-option *ngFor="let item of responseLeadStatus"  value="{{item.status_id}}" >{{item.status}}</ion-select-option>
        </ion-select>

I want to set default value to ion-select dynamically .i.e From .ts file to HTML
I also got status_id in .ts file.

2 posts - 2 participants

Read full topic

I’m working on an Ionic React App running on top of Capacitor. It works fine with axios requests in browser, but on Android I have CORS issues, that’s why I’m using the community HTTP plugin: GitHub - capacitor-community/http: Community plugin for native HTTP

I click for example on my Login button. My data such as email and password are supposed to be sent via HTTP post, but it catches the error I have put there: Try again’ .
Do you have any idea why it might happen?

No error logs regarding the request on Android Studio either. Only these:

/system_process E/ClipboardService: Denying clipboard access to com.google.android.googlequicksearchbox, application is not in focus nor is it a system service for user 0
E/netmgr: qemu_pipe_open_ns:62: Could not connect to the ‘pipe:qemud:network’ service: Invalid argument
E/netmgr: Failed to open QEMU pipe ‘qemud:network’: Invalid argument
E/wifi_forwarder: qemu_pipe_open_ns:62: Could not connect to the ‘pipe:qemud:wififorward’ service: Invalid argument
E/wifi_forwarder: RemoteConnection failed to initialize: RemoteConnection failed to open pipe

To solve these errors I have added this setting inside application element:

android:usesCleartextTraffic=“true”

but the errors still occur.

Login function:

const doLogin = async (e: any) => {

e.preventDefault();

const loginData = {

  email: eMail,

  password: password,

};

//https://github.com/capacitor-community/http

const options = {

  url: "https://xx/login,

  data: loginData,

};

const response: HttpResponse = await Http.post(options)

  .then((response) => {

    if (response.data.token) {

      history.push("/home");
      window.location.reload();
    }
    return response.data;
  })

  .catch((error) => {

    setMessage(

      "Try again!"
    );

  });

};

I’m stuck with this issue since 3 days so any help would be really really appreciated. Thank you!

1 post - 1 participant

Read full topic

Hello,
Looking for a way to update my Ionic CLI to the latest version. Which I have already updated globally, but is not reflecting on my project.

Global CLI

6.16.1

Local Project CLI with all the other information (Used Ionic Info command)

Ionic:

Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.6.7
@angular-devkit/build-angular : 12.0.1
@angular-devkit/schematics : 12.0.1
@angular/cli : 12.0.1
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 2.4.7
@capacitor/core : 2.4.7

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 14 other plugins)

Utility:

cordova-res (update available: 0.15.3) : 0.15.2
native-run : 1.3.0

System:

NodeJS : v14.15.0 (/usr/local/bin/node)
npm : 6.14.13
OS : macOS
Xcode : Xcode 12.5 Build version 12E262

Any Help is appreciated. Thank you.

6 posts - 3 participants

Read full topic

Hi to all

I’m trying to follow this simple tutorial to streams youtube video in an Ionic App, using streaming media plugin as player:

Unfortunately this tutorial get me at last the following error:

ERROR Error: Uncaught (in promise): Object: {"status":404,"url":"https://www.youtube.com/get_video_info?video_id=qhiVTfZOkGQ&eurl=https%3A%2F%2Fyoutube.googleapis.com%2Fv%2FqhiVTfZOkGQ&ps=default&gl=US&hl=en","headers":{"alt-svc":"h3-29=\":443\"; ma=2592000,h3-T051=\":443\"; ma=2592000,h3-Q050=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000,quic=\":443\"; ma=2592000; v=\"46,43\"","x-android-received-millis":"1622107225851","x-frame-options":"SAMEORIGIN","content-type":"text/html; charset=utf-8","x-content-type-options":"nosniff","date":"Thu, 27 May 2021 09:20:24 GMT","strict-transport-security":"max-age=31536000","p3p":"CP=\"This is not a P3P policy! See http://support.google.com/accounts/answer/151657?hl=en for more info.\"","x-android-sent-millis":"1622107225753","cache-control":"no-cache","server":"YouTube Frontend Proxy","content-length":"0","x-android-response-source":"NETWORK 404","x-android-selected-protocol":"http/1.1","expires":"Tue, 27 Apr 1971 19:44:06 GMT","x-xss-protection":"0","set-cookie":"VISITOR_INFO1_LIVE=WxRpAV-w-KI; path=/; domain=.youtube.com; secure; expires=Tue, 23-Nov-2021 09:20:24 GMT; httponly; samesite=None, s_gl=9ac72c6a1fae954ce2c787405a80b298dQIAAABVUw==; path=/; domain=.youtube.com"},"error":""}
    at resolvePromise (http://localhost/polyfills-es5.js:10371:31)
    at http://localhost/polyfills-es5.js:10281:17
    at rejected (http://localhost/vendor-es5.js:128214:89)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost/polyfills-es5.js:9910:26)
    at Object.onInvoke (http://localhost/vendor-es5.js:64589:33)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost/polyfills-es5.js:9909:52)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost/polyfills-es5.js:9669:43)
    at http://localhost/polyfills-es5.js:10429:34
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost/polyfills-es5.js:9942:31)
    at Object.onInvokeTask (http://localhost/vendor-es5.js:64580:33)defaultErrorLogger @ vendor-es5.js:45196

I wonder if ionic-youtube-streams is still functioning, or if it is necessary use a youtube API Key in the config.xml. In particular the url www.youtube.com/get_video_info?video_id= seems no more available, but on google there isn’t available information about this url, nor about the ionic-youtube-streams and if it is still functioning

Thanks in advance for any suggestion

2 posts - 1 participant

Read full topic

Firstly, hi and thanks for reading this. I’ve used barcode scanner plugin ( Barcode Scanner | Install Camera Barcode Scanner Plugin (ionicframework.com)) in a Android app with Capacitor but, now I’d like to use it on a web page application.

Is there anyway to implement it in that case?

1 post - 1 participant

Read full topic

Hi. I have an issue with some ionic component styles that sometimes are not properly loaded. It happens randomly to different components.

Here is an example with a IonIcon where the :host style is not loaded

Here is what it should look like:

image587×629 46.8 KB

Here is what I get the the bug occurs (the :host style is not loaded):

image519×522 40.5 KB

I use Ionic React, and here is my ionic info:

Ionic:

Ionic CLI : 6.12.1 (/home/arthur/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.4.1

Capacitor:

Capacitor CLI : 2.0.2
@capacitor/core : 2.0.2

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v14.15.0 (/home/arthur/.nvm/versions/node/v14.15.0/bin/node)
npm : 6.14.8
OS : Linux 5.4

The thing is I cannot find a way to trigger the bug, it just happens randomly. I know it is not much info, but if someone has any idea of what could trigger this i would at least know what to look for.

TY

5 posts - 3 participants

Read full topic

I have a progressive web app built using Angular and Ionic. I am trying to disable back button on Iphone but it has not worked at all. I have tried using the following:

1. GitHub - Zatikyan/angular-disable-browser-back-button
2. Using Replace url when navigating to different page
3. Explicitly setting window.history to null

None of these options have worked for me. Does anyone has any idea or any other options that we can try? or anyone has done similar to this?

Also, I would like to mention we would like to disable users moving the screen left and right using their fingers which is basically the back and forward button on Iphone safari?

2 posts - 2 participants

Read full topic

Does anyone know how to use plugins on capacitor 3.0?
plugins is deprecated and I don’t know how to use it instead.
Thanks in advanced

2 posts - 2 participants

Read full topic

image1174×144 6.3 KB

Related code:
When routing is click, vue warning error occured.

<core-footer 
      message="Already got an account?" 
      text="Login" 
      link="/auth/login"
    />

<ion-row class="ion-text-center ion-justify-content-center">
    <ion-col size="12">
            <p >{{$props.message}} 
                        <span @click="() => router.push($props.link)" class="custom-link">{{text}}  &rarr;</span>
            </p>
                
    <ion-col>
</ion-row>

4 posts - 2 participants

Read full topic

Am sending local notification from device only. My requirement is to play custom 23 sec audio in place of default notification sound. I have made a temporary fix by playing audio just after notification fire but it only works when app is running in foreground.
Please help if anyone has done this thing . Am using the IONIC 5 , Coredova and Angular 10.
Thank you

1 post - 1 participant

Read full topic

Hello Sir, does someone have a better idea of how to point the default-href of the ion back router to be better?

Cuz I don’t know why I am using

<ion-back-button :default-href="{ name: 'home' }" />

not return correctly that page I want, like in another page return to the Home page like that. Please Help…

3 posts - 2 participants

Read full topic

Hello everybody.
I’m using

import { Deploy } from ‘cordova-plugin-ionic/dist/ngx’;

to deploy live update to my app.
Everything works fine, but I would like to show a progress indicator while the app is updating.
I’m using the following function:

async UpdateApp() {
    this.loading.presentLoading('Updating to last version');
    const update = await this.deploy.checkForUpdate();
    if (update.available) {
      await this.deploy.downloadUpdate((progress) => {
        console.log(progress);
      })
      await this.deploy.extractUpdate((progress) => {
        console.log(progress);
      })
      await this.deploy.reloadApp();
    }
  }

but it looks like the downloadUpdate and extractUpdate doesn’t give usefull information for creating a user-readable progress indicator.
Am I missing something?

Thanks

1 post - 1 participant

Read full topic