@julio_diniz_perdigao wrote:

Any idea why this happens?

Tested with iPhone 6 running iOS 12.x and cordova. Ionic with javascript. Keyboard plugin set to disableScroll.

Posts: 1

Participants: 1

Read full topic

@Faraon wrote:

Hi guys. I’m having a very weird problem with my app. The thing is that i have a guard to all my app pages with a service. The guard is based on if you are login or not. The problem is that when you choose to close session the app must send you to the login page because i do “authServices.logout()”, of course i can send you manual to that page but with the guard it send you automatically, the really problem is that when i launch for the first time the app to the device with ionic cordova run android --device it does not send me to the login page, but when i do that and the app is installed on the device it does send me to the login app. I really dont understand why is doing that, I really appreciatte any help, thank in advance

Posts: 3

Participants: 2

Read full topic

@The_Unknown wrote:

Hello,

the title says it all. I just tried to style a slider. Since the slider is situated in a page component, I tried to set the styles there in the component which didn’t work. After I read somewhere on the web that this might work, I put it into the global.scss and now it worked.

But I have absolutely no idea why this is?? Where is the difference here?

Can someone help me out here?

Thanks in advance.

Bye

Posts: 1

Participants: 1

Read full topic

@alitalaee wrote:

please help me how can I design this

attachment375×812 307 KB

Posts: 1

Participants: 1

Read full topic

@theitteam wrote:

Hey all,

I have tried the following:

 <IonHeader translucent>
        <IonToolbar className="ion-text-center ion-toolbar-transparent">
          <IonTitle className="ion-text-uppercase">Home</IonTitle>        
        </IonToolbar>
  </IonHeader>
      <IonContent fullscreen>

ion-toolbar.ion-toolbar-transparent {
  --background: transparent;
  --ion-color-base: transparent !important;
}

However the header still has a background color and the content is not fullscreen?

Posts: 1

Participants: 1

Read full topic

@raisadr wrote:

Hi, I have been trying to make a Tabs.
But, everytime I make Tabs, always stuck like this.
What should I do anyway?

image1920×1080 183 KB

Posts: 1

Participants: 1

Read full topic

@nitipol wrote:

example

help me please.

Posts: 1

Participants: 1

Read full topic

@enzofantini wrote:

Hey guys, I’m developing a read system for a chat. Every message sent have a ‘read = false’ attribute. How can I know if the other user entered the chat page so I can change to ‘read = true’? I have no idea…

HELP ME! :’(

Captura de Tela (110)1920×1080 225 KB

Posts: 1

Participants: 1

Read full topic

@ioclaudio wrote:

Hi,
I have an Ionic4 app that is used both as App for mobile devices and as PWA for browser.
I have this requirement valid only for the PWA version:

• The page ship of the app should be opened in another tab of the browser (or another window).
  The page is a page of the app, not an external page.

In the app I use this code to change page:

this.navCtrl.navigateForward(['managers', 'ship', deviceName]);

In the PWA version to open this page in another window, I’m using this code:

const url = 'managers/ship/' + deviceName;
window.open(url);

the problem is that, when this page is opened, probably because of the routing rules, the app opens the “home page” of the app and not the required page.
If in the browser I put the link “http://localhost:8200/managers/ship/mysihp1” I have the same problem.

In the file “app-routing.module.ts” I have this code:

const routes: Routes = [
  { path: '', redirectTo: 'login',  pathMatch: 'full' },
...
]

And in the file “managers/manager-routing.module.ts” I have this code:

const routes: Routes = [
  { path: 'ship/:deviceName', loadChildren: './ship/ship.module#ShipPageModule' },
]

What is wrong with this routing?
Thank you very much

Claudio Battaglino

Posts: 1

Participants: 1

Read full topic

@Cephaz wrote:

Hello,

I just started on ionic, and I’m already having a hard time.

I’m trying to get a project started on android.
but when I launch the application it shows me a white screen

the console show me this

10.3acb16cd.chunk.js:2Uncaught (in promise) TypeError: Object.entries is not a function
at e.reset (http://localhost/static/js/10.3acb16cd.chunk.js:2:24106)
at Be (http://localhost/static/js/10.3acb16cd.chunk.js:2:86759)
at Ue (http://localhost/static/js/10.3acb16cd.chunk.js:2:87203)
at http://localhost/static/js/10.3acb16cd.chunk.js:2:129363

i’m on ubuntu

Ionic:

Ionic CLI : 6.2.0 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.0.4

Capacitor:

Capacitor CLI : 1.5.0
@capacitor/core : 1.5.0

Utility:

cordova-res : not installed
native-run : 0.3.0

System:

NodeJS : v12.16.1 (/usr/bin/node)
npm : 6.13.4
OS : Linux 5.3

tsconfig

{
“compilerOptions”: {
“target”: “es5”,
“lib”: [
“dom”,
“es2017”,
“dom.iterable”,
“esnext”
],
“allowJs”: true,
“skipLibCheck”: true,
“esModuleInterop”: true,
“allowSyntheticDefaultImports”: true,
“strict”: true,
“forceConsistentCasingInFileNames”: true,
“module”: “esnext”,
“moduleResolution”: “node”,
“resolveJsonModule”: true,
“isolatedModules”: true,
“noEmit”: true,
“jsx”: “react”
},
“include”: [
“src”
]
}

I need help, please
How to fix this bug

Posts: 1

Participants: 1

Read full topic

@PepeMax wrote:

I am developing an application with Ionic.

To explain a little, it is a text book, the teachers add the homework and we see them.

The database is managed by Firestore. I’m receiving Cloud Messaging notifications on my phone.

I would like to know if it is possible with Firebase to synchronize Firestore and Cloud Messaging.

Can you provide me with a code so that as soon as a teacher adds an homework (with an ID automatically generated on Firebase), Cloud Messaging sends a notification to all users, therefore iOS and Android with a Title and a body

mghyR1272×446 32.4 KB

Thanks in advance

Posts: 1

Participants: 1

Read full topic

@Fab4guy wrote:

I have a funny problem.
I have made a layout component.

LayoutComponent

<ion-split-pane contentId="main">
  <ion-menu side="start" menuId="custom" contentId="main">

    <ion-header>
      <div id="userBox">
        <div id="userImage"><i class="far fa-user-circle"></i></div>
        <p>Nicolas Lauinger<br>TGOPOD</p>
        <div id="switchTheme">
          <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" #theme [(ngModel)]="currentTheme" (change)="changeTheme(theme)">
            <label class="onoffswitch-label" for="myonoffswitch">
              <span class="onoffswitch-inner"></span>
              <span class="onoffswitch-switch"></span>
            </label>
          </div>

        </div>
        <p class="logout">
          <i class="fas fa-sign-out-alt"></i>
        </p>
      </div>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let nav of navi">
          <ion-item lines="none" [class.active]="isActive('/'+ nav.link)" [routerLink]="'/'+ nav.link">
            <i slot="start" class="fas {{nav.icon}}"></i>{{nav.linkName}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>

  </ion-menu>

  <ion-router-outlet animated="false" id="main"></ion-router-outlet>

</ion-split-pane>

In the app-routing.module.ts it is called at every path.

app-routing.module.ts

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {LayoutWithSideNavComponent} from './layout/layout-with-side-nav/layout-with-side-nav.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: LayoutWithSideNavComponent,
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'info',
    component: LayoutWithSideNavComponent,
    loadChildren: () => import('./pages/info/info.module').then(m => m.InfoPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

That’s what it looks like.

bild11043×606 14.3 KB

Now when I click on contact it looks like this.

bild2959×507 12.5 KB

So far everything as expected and in order. But when I click on Dashboard again it suddenly looks like this. The navigation bar has disappeared.

What am I doing wrong?

Posts: 1

Participants: 1

Read full topic

@Vartex05 wrote:

Hi, iam trying to run my ionic 3 app on new device, and i encountered an typings error, when i run ionic cordova run --prod

WARN] Detected locally installed Ionic CLI, but it's too old--using global CLI.
[INFO] Hardware device(s) found for android. Using --device.
> ionic-app-scripts.cmd build --prod --target cordova --platform android
[14:34:20]  ionic-app-scripts 3.2.4
[14:34:20]  build prod started ...
[14:34:20]  clean started ...
[14:34:20]  clean finished in 19 ms
[14:34:20]  copy started ...
[14:34:20]  deeplinks started ...
[14:34:20]  deeplinks finished in 227 ms
[14:34:20]  ngc started ...
[14:34:31]  typescript: C:/programming/ionic/dochazkamobilni/typings/cordova-typings.d.ts, line: 2
            File 'C:/programming/ionic/dochazkamobilni/.vscode/typings/cordova-ionic/plugins/keyboard.d.ts' not found.


[14:34:31]  typescript: C:/programming/ionic/dochazkamobilni/typings/cordova-typings.d.ts, line: 3
            File 'C:/programming/ionic/dochazkamobilni/.vscode/typings/jquery/jquery.d.ts' not found.


[14:34:31]  ionic-app-script task: "build"
[14:34:31]  Error: The Angular AoT build failed. See the issues above
Error: The Angular AoT build failed. See the issues above
    at C:\programming\ionic\dochazkamobilni\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:232:55
    at step (C:\programming\ionic\dochazkamobilni\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
    at Object.next (C:\programming\ionic\dochazkamobilni\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
    at fulfilled (C:\programming\ionic\dochazkamobilni\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)

so far i was soliving it by copying the typings from another computer, where i worked on this app, but i would like to solve it permanently. How can i fix this? My package.json looks like this

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@ionic-native/app-minimize": "^4.4.2",
    "@ionic-native/barcode-scanner": "^4.5.2",
    "@ionic-native/core": "^4.3.2",
    "@ionic-native/device": "^4.5.2",
    "@ionic-native/geolocation": "^4.3.2",
    "@ionic-native/native-storage": "^4.3.2",
    "@ionic-native/network": "^4.3.2",
    "@ionic-native/splash-screen": "^4.3.2",
    "@ionic-native/sqlite": "^4.3.2",
    "@ionic-native/status-bar": "^4.3.2",
    "@ionic/storage": "2.1.3",
    "android-versions": "^1.2.1",
    "cordova-android": "^8.1.0",
    "cordova-plugin-appminimize": "^1.0.1",
    "cordova-plugin-certificates": "^0.6.4",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-network-information": "^1.3.4",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^4.0.0",
    "hex2dec": "^1.0.1",
    "ionic": "^3.16.0",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "moment": "^2.18.1",
    "node-sass": "^4.13.1",
    "phonegap-nfc": "^1.0.3",
    "phonegap-plugin-barcodescanner": "^7.1.2",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.4.0",
    "uuid": "^3.3.2",
    "xml2js": "^0.4.17",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.4",
    "ionic": "3.13.2",
    "retyped-xml2js-tsd-ambient": "0.0.0-0",
    "typescript": "^2.6.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "dochazka: An Ionic project",
  "cordova": {
    "platforms": [
      "android"
    ],
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
      },
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-appminimize": {},
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-certificates": {},
      "phonegap-nfc": {},
      "cordova-sqlite-storage": {}
    }
  }
}

Posts: 1

Participants: 1

Read full topic

@Mmadzharov wrote:

Hey guys after I updated to Ionic 5 my header disappeared. Any Idea

Posts: 1

Participants: 1

Read full topic

@Incubbus wrote:

(Ionic 5)
I am trying to build a one-page app which consists of two parts: a map and a list.
Between the map and the list (when viewing the map at the bottom; when viewing the list at the top) is a button which, when pressed, uses ion-content’s scrollToTop() & scrollToBottom().
So far this worked.

So i wanted to add the feature, that when the user scrolls manually into the direction of the map or the list, the page is scrolled into the direction automatically by using scrollToTop() or scrollToBottom().

That’s why i enabled scroll events on ion-content and listen to (ionScroll[Start/End]) like so:

@ViewChild(IonContent, { static: false }) _content: IonContent;

  private onScrollStart()
  {
    this._lastDeltaY = 0;
  }

  private onScrollEnd()
  {
    if(this._ignoreScrolling)
      return;

    let promise;
    this._ignoreScrolling = true;
    if(this._lastDeltaY > 0)
    {
      promise = this.openAView();
    }
    else if(this._lastDeltaY < 0)
    {
      promise = this.openBView();
    }
    promise.then(_ => {
      this._ignoreScrolling = false;
    });
  }

  private onScroll(event)
  {
    this._lastDeltaY = event.detail.deltaY;
  }



 private async openAView()
  {
    console.log('Opening A view...');

    await this._content.scrollToTop(viewChangeScrollTimeMilliseconds);
    this._AViewOpen = false;

    console.log('...done A');
  }

The problem is, that whenever an automatic scroll is done, there will be done a second one right after as i can see in the logs:

Opening A view...
...done A
Opening A view...
...done A

What am i doing wrong here or is this an ionic-bug?

Posts: 1

Participants: 1

Read full topic

@shepard wrote:

An ion-select with hundreds of options ( says years for example ).
Once an option is selected, the options should auto-scroll to that option and not require the user to have to manually scroll through the large list to find it.

Has this not yet been resolved in v5?

Any modern workarounds for this?

Posts: 1

Participants: 1

Read full topic

@KevinB1 wrote:

I changed my toolbar background (ionic 4) to transparent using:

ion-toolbar {
     --background: transparent !important;
     --ion-color-base: transparent !important;
 }

This works on all browsers except IE (Im tested on IE11).

I also tried setting the background with a selector that works when I edit it directly in IE, but it just gets ignored when putting it in my CSS:

ion-toolbar .toolbar-background {
      background: rgba(0,0,0,0) !important;
}

Is there any way to apply a workaround?

Posts: 1

Participants: 1

Read full topic

@alexkoretzki wrote:

Hi
i have authentication server that i redirect to from the app to login
in the web all works but in the emulator after the login the return gets error

Capture563×703 86.3 KB

Posts: 1

Participants: 1

Read full topic

@aardra wrote:

Hi All

I am I got google maps working, but once i leave the page an re enter the maps is all greyed out till, i zoom in and out either using a mouse on crome or fingers on a mobile device.

I have seen many others with the same issue, but no clear solution.

Can someone help me solve this issue?

Posts: 1

Participants: 1

Read full topic

@obinnae wrote:

I’m rebuilding an app where a user can find other users within a certain distance (say, 30 miles). The user object has the city, state and/or zip. Any recommendation on how to achieve this efficiently - as in, find all users within the range? I know Google’s Maps api can be used, but would like to know other ideas.

Posts: 1

Participants: 1

Read full topic