@sndwav wrote:

Hello,
I’m working on an app for our company and we started probing Ionic for us to use.

We need the app to be in 2 different languages, one of them is RTL.

I searched about the topic, but it seems like Ionic 4 didn’t support it up to a certain point, and then it partially supported it, but that post was from a few months ago.

In Ionic 4’s current state, how possible is it to do?

Thank you, everybody!

Posts: 1

Participants: 1

Read full topic

@youssefelgarny wrote:

hi every body,

i am new to ionic and i want to use a service for retrieving data from the REST API but i get this error !

i am using ionic v4

image.png746×451 8.48 KB

Posts: 2

Participants: 2

Read full topic

@abhayjani wrote:

can anyone help me to edit the default class css for ion component in ionic v4.
i have slider and i want to edit slider wrapper class css but its not work

.swiper-wrapper {
  height: unset !important;
}

thanks in advance

Posts: 1

Participants: 1

Read full topic

@youssef_tdi wrote:

hi i want to add google maps key dynamically in index.html
any suggestion? thanks

Posts: 1

Participants: 1

Read full topic

@t_amiryan wrote:

Hey.

Is there any way to customize the language of native DatePicker directly from the app.
My app supports two languages and I would like to change the month names to german or english respectively.
It is changed when the language of phone is changed only…

chooseDate(mode: string, keyname: string, oldDate: boolean) {
this.datePicker.show({
date: new Date(),
mode: mode,
allowOldDates: oldDate,
minDate: this.getNowAndAdd(2),
okText: this.commonServices.okText,
cancelText: this.commonServices.cancelText,
androidTheme: 0
})
.then(date => {
this.filterDate(date);
this.wasteServiceForm.patchValue({ [keyname]: this.date })
},
err => console.log("Error occurred while getting date: ", err)
);
}

Thanks beforehand.

Posts: 1

Participants: 1

Read full topic

@jylikorpi wrote:

I’m losing my mind with this plugin. I have uninstalled it a million times and removed it from config.xml and package.json, but it keeps coming back. And worst of all, it installs version 1.1.1 of the plugin which I believe is full of security holes. Where and in gods name, WHY it keeps coming back to my project?

Posts: 1

Participants: 1

Read full topic

@sibabratswain wrote:

My Goal - Create dynamic pdf and show it on the page inside the app directly.
Steps I have taken - Used pdf make and got the pdf opened in next tab.

 let docDefinition = {
      content: [
        {text: 'REMINDER', style: 'header'},
        {text: new Date().toTimeString(), alignment: 'right'},

        {text: 'From', style: 'subheader'},
        {text: this.letterObj.from},

        {text: 'To', style: 'subheader'},
        this.letterObj.to,

        {text: this.letterObj.text, style: 'story', margin: [0, 20, 0, 20]},

        {
          ul: [
            'Bacon',
            'Rips',
            'BBQ',
          ]
        }
      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
        },
        subheader: {
          fontSize: 14,
          bold: true,
          margin: [0, 15, 0, 0]
        },
        story: {
          italic: true,
          alignment: 'center',
          width: '50%',
        }
      }
    }

  pdfMake.createPdf(docDefinition).open({}, window);

Question - I want to show the pdf inside the app with existing header and sidebar.
Please help me out or any suggestions.

Posts: 1

Participants: 1

Read full topic

@rohankapurmobile wrote:

Hey, so I recently made an Ionic basic navigation app successfully with a tabs based layout. However, I am now having difficulty supplying data to the individual tabs by the route. Here are the relevant bits of what I have so far (I explain more after the code):

Here is the app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },
  { path: 'bitcoin-wallet', loadChildren: './pages/bitcoin-wallet/bitcoin-wallet.module#BitcoinWalletPageModule' },
  { path: 'ethereum-wallet', loadChildren: './pages/ethereum-wallet/ethereum-wallet.module#EthereumWalletPageModule' }
];

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

The bitcoin-wallet page is the one I would like to supply an ‘id’ parameter to. The issue here is that the bitcoin-wallet page is actually a tab based layout.

The bitcoin-wallet folder has its own page and multiple tab pages in there as well. The layout is as follows:

• bitcoin-wallet-folder
  |_ details
  |_ tab1
  |_ tab2
  |_ tab3
  |_ bitcoin-wallet.module.ts
  |_ bitcoin-wallet.page.html
  |_ bitcoin-wallet.page.scss
  |_ bitcoin-wallet.page.spec.ts
  |_ bitcoin-wallet.page.ts

Here is the bitcoin-wallet.module.ts file:

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

import { IonicModule } from '@ionic/angular';

import { BitcoinWalletPage } from './bitcoin-wallet.page';

const routes: Routes = [
  {
    path: '',
    component: BitcoinWalletPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: './tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: './tab2/tab2.module#Tab2PageModule'
          },
          {
            path: 'details',
            loadChildren: './details/details.module#DetailsPageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: './tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/bitcoin-wallet/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/bitcoin-wallet/tab1',
    pathMatch: 'full'
  }
];

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

What I need is to be able to pass in data to the route of the bitcoin tabs page. Something like ’ localhost:8100/bitcoin-wallet/:id/tab1 '. Is this possible, and if so how would I achieve this?
(localhost only included because im testing this on my PC’s browser)

For reference, I already tried adding a simple ‘/:id’ to the bitcoin-wallet page in the app-routing module and adding the same ‘:id’ to the last two objects in the bitcoin-wallet routing module and it didn’t work. I tried routing to there from the dashboard page using:

  <ion-button [routerLink]="['/', 'bitcoin-wallet', 1234]" expand="block" color="primary"> BTC Wallet </ion-button>

With 1234 clearly being the :id parameter, it said that it couldn’t find the route /bitcoin-wallet/1234.

More than happy to share the entire repo if required. Thanks so much

P.S. The names of the pages are all placeholders lmao. I’m not doing a crypto thing, just trying to learn. Maybe I will one day though

Posts: 1

Participants: 1

Read full topic

@Samaludheen wrote:

I am trying to ask permission at run time. I am getting TypeError: Object(…) is not a function at AndroidPermissions.requestPermission as per ionic docs.

permissions I am requesting is

this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE, this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE]);

I am getting this error

TypeError: Object(...) is not a function
at AndroidPermissions.requestPermission (vendor.js:63232)
at HomePage.webpackJsonp.139.HomePage.getPermission (main.js:75)
at main.js:67
at t.invoke (polyfills.js:3)
at Object.onInvoke (vendor.js:5134)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:5125)

Any Idea what I will be doing wrong? Or what is the cause of this issue. My package.json file is this

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/android-permissions": "^5.0.0-beta.14",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/diagnostic": "^5.1.0",
    "@ionic-native/http": "^5.0.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/sqlite": "^5.0.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/storage": "2.2.0",
    "@types/cordova": "0.0.34",
    "cordova-android": "7.1.4",
    "cordova-pdf-generator": "2.0.7",
    "cordova-plugin-advanced-http": "2.0.4",
    "cordova-plugin-android-permissions": "1.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "6.0.1",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "2.6.0",
    "cordova.plugins.diagnostic": "4.0.11",
    "file-saver": "^2.0.0",
    "ionic-angular": "3.9.2",
    "ionic-img-viewer": "^2.9.0",
    "ionicons": "3.0.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "xlsx": "^0.14.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.2",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-pdf-generator": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-advanced-http": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-android-permissions": {},
      "cordova.plugins.diagnostic": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Posts: 1

Participants: 1

Read full topic

@ioclaudio wrote:

Hi,
I’d like to create a PWA with Ionic4 that shows a Google Map and interacts with it, choosing and adding pin, designing areas, and so on.
Which is the recommended library to do this?
Is it possible to use the standard Google Map Api with all its features inside an Ionic app?

Thank you very much

claudio

Posts: 1

Participants: 1

Read full topic

@Driesel wrote:

Hi everybody,

yesterday i cloned my repo on my macbook and had seen, that the mac couldn’t load any ionic icon.
This error occurs:

GET http://localhost:8100/svg/md-trash.svg 404 (Not Found)
GET http://localhost:8100/svg/ios-menu.svg 404 (Not Found)

But on my Ubuntu workspace everything is fine, there is see every icon.

Any idea how to solve this?

Posts: 1

Participants: 1

Read full topic

@MrWhite wrote:

Hi, I already post a question on stackoverflow but no answer so I take a chance on ionic forum… https://stackoverflow.com/questions/54667997/ionic-3-custom-svg-icon-cors-issue

I’m currently trying to build my Ionic 3 app on IOS 12.1.
My custom svg icon added with the following code :

ion-icon {
&[class*="std-icon"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
  } // custom icons

  &[class*="std-icon-medal"] {
    mask-image: url(../assets/icon/medal.svg);
  }
}

is not displayed on IOS 12.1 because of the following error:

file:///Users/…/Studay.app/www/assets/icon/medal.svg

[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin (medal.svg, 0)

[Error] Origin null is not allowed by Access-Control-Allow-Origin.

I know that WKWebView as enforced CORS, but in my case it is just about load internal resources, in www/assets folder …
Even the svg link start by file:/// so I don’t really understand what’s happens here.

My Info:

Ionic:

ionic (Ionic CLI) : 4.6.0
(/Users/hugo/.config/yarn/global/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-webview 1.2.1, (and 22 other plugins)

System:

NodeJS : v11.5.0 (/usr/local/Cellar/node/11.5.0/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61 ionic (Ionic CLI) : 4.6.0 (/Users/hugo/.config/yarn/global/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Posts: 1

Participants: 1

Read full topic

@Kyrax80 wrote:

Hello.

I am making an Ionic Module following this tutorial .

In my module I use toasts but I am not being able to apply a style to it (in a normal Ionic App I can do it with no problems).

My code is the following:

imports...

const HTML = `Hello`

const CSS = `
.toast-error > div {
  text-align: center;
  background-color: red;
}
`

@Component({
  selector: 'my-component',
  template: HTML_TEMPLATE,
  styles: [CSS]
})
export class MyComponent{

  public constructor(private toastCtrl: ToastController) { }

  public async myMethod(): Promise<any> {
    this.modal.create(MyModalComponent, {
      "list": list
    }).present().then(() => console.log("done")
      .catch((error) => {
        console.log(error)
        this.toastCtrl.create({
          message: "An error has occurred",
          duration: 4000,
          position: "top",
          cssClass: "toast-error"
        }).present();
      });
  }
}

How can I make it work?

Thanks.

Posts: 1

Participants: 1

Read full topic

@youssefelgarny wrote:

hello,
please i need your help … i am trying to get data from REST API and i get that error !

i am using ionic v4

image.png732×462 9.81 KB

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class LoginService {

  

  constructor(private http: HttpClient) {
  }

  // service that test if the user exist or not
  authentification(user:string,password:string):Observable<any>{

   

    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'JsonStub-User-Key': '732e939b-05b7-4877-8d8f-f924e67638eb',
      'JsonStub-Project-Key': '31ec72a8-2779-4931-843f-1cbd37b81b2c',
      "Access-Control-Allow-Headers" : "*"
    });
    return this.http.get('http://jsonstub.com/enova_sante_app/api/services/patient',{headers,responseType: 'json'})
        .pipe(map(data => {

          //console.log(data.status);
          console.log(data); // data received by server
          //console.log(data.headers);
          return data;
          
        },
        (error: any) => {
            console.log(error);
        }));
    
  }


}

Posts: 2

Participants: 2

Read full topic

@demokumar wrote:

in ionic 3 we use menuclose option to close menu on click menu items this is not work in ionic4
and also if we don’t want to close menu so we remove menuclose in ionic 3 but in ionic 4 how to do this

Posts: 1

Participants: 1

Read full topic

@nicolas-ballaman wrote:

Hi, i get this error in AndroidStudio

Error during Sync: The interruption of an existing connection has been forced by the remote host
Session ‘app’: Error Installing APK

ionic info

Ionic:
ionic (Ionic CLI) : 4.5.0
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:
cordova-plugin-device 2.0.2 “Device”
cordova-plugin-inappbrowser 3.0.0 “InAppBrowser”
cordova-plugin-ionic-keyboard 2.1.3 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 2.3.2 “cordova-plugin-ionic-webview”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-statusbar 2.4.2 “StatusBar”
cordova-plugin-whitelist 1.3.3 “Whitelist”
cordova-sqlite-storage 2.6.0 “Cordova sqlite storage plugin”
cordova-support-google-services 1.1.0 “cordova-support-google-services”
phonegap-plugin-multidex 1.0.0 “Multidex”
phonegap-plugin-push 2.2.3 “PushPlugin”

System:
NodeJS : v11.4.0
npm : 6.7.0
OS : Windows 10

My test device:
Motorola MotoE2(4G-LTE) (Android 6.0, API 23)

This app work in android 6.0.1, 7.0.0 but dosn’t work in android 6.0.0 or lower

I run:
ionic codrova platform add android
ionic codrova build android
run platform/android in Android studio

Any solution for this? I need it to work for versions greater than 5.0

Posts: 1

Participants: 1

Read full topic

@Jalvarez05 wrote:

Hello everyone .

I am using interceptors on my app, and I’ve followed this tutorial : https://ionicacademy.com/ionic-http-interceptor/

I’ve done some modification for it only function when error is 403( its my error when token is expired)

intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {

let promise = this.storage.get('token');

return Observable.fromPromise(promise)
  .mergeMap(token => {
    let clonedReq = this.addToken(request, token);
    return next.handle(clonedReq).pipe(
      catchError(error => {
        // Perhaps display an error for specific status codes here already?
        if (error.status === 403) {
          // not authorized error .. do something
          let msg = error.message;

          let alert = this.alertCtrl.create({
            title: error.name,
            message: msg,
            buttons: ['OK']
          });
          alert.present();
        }
        // Pass the error to the caller of the function
        // return Observable.throw(error);
        //return _throw(error);
        return Observable.of(error);
      })
    );
  });

}

// Adds the token to your headers if it exists
private addToken(request: HttpRequest, token: any) {
if (token) {
let clone: HttpRequest;
clone = request.clone({
setHeaders: {
Accept: application/json,
‘Content-Type’: application/json,
Authorization: Bearer ${token}
}
});
return clone;
}
return request;
}

The context is : My component is requesting simultaneously 3 http requests, and they are catched by the interceptor’s catch block (which has an alert). I’m watching 3 alerts, but I want to get just 1 and ignore the others because The first one will be replaced to return the login page and remove storage.

private cleanApp() {
this._us.removeStorageTokenExpired();
let nav = this.app.getActiveNav();
nav.setRoot(‘Login’);
}
How can I get that , thank you in advance.

Posts: 1

Participants: 1

Read full topic

@carvear wrote:

Hello everybody. I am just trying to make a push to another page but i get the error: Cannot read property ‘push’ of undefined and i don’t know how to solve it. I read diferent posts but it doesnt work.

The method (getCategoriasPrincipales()) returns well every category, i can see it in the menu.

Param1: is well recieved from another page like this
this.paramCatId = navParams.get(‘param1’);

Thanks a lot!

App.html
<ion-menu [content]=“content”>

La Empresa Acerca De Categorias {{cat.categoriaNombre}}

<ion-nav [root]=“rootPage” #content>

app.component.ts

import { Component, ViewChild } from ‘@angular/core’;
import { Platform, Nav } from ‘ionic-angular’;
import { Http } from ‘@angular/http’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { ProductosCategoriaPage } from ‘…/pages/productos-categoria/productos-categoria’;

import { HomePage } from ‘…/pages/home/home’;
@Component({
template: ‘<ion-nav #myNav [root]=“rootPage”>’,
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(‘Nav’) nav: Nav;
rootPage:any = HomePage;
empresa = 1;
categoriaDestacada: any;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public http: Http) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
this.getCategoriasPrincipales();
}

getCategoriasPrincipales(){
this.http.get(“http://…file.php?emp=”+this.empresa).subscribe( data => {
this.categoriaDestacada = JSON.parse(data["_body"]);
}, err =>{
console.log(err);
});
}

productosCategoria2(elemento){
this.nav.push(ProductosCategoriaPage, {param1: elemento});
}
}

Posts: 1

Participants: 1

Read full topic

@960hrt wrote:

Is it the right choice to use firebase realtime with SQLite in ionic app

Posts: 1

Participants: 1

Read full topic

@mlynch wrote:

I have an application that creates files, and allows the user to delete them when they’re no longer necessary. For several months I’ve had this working, but it’s suddenly stopped working and I can’t figure out why.

My app consists of several pages, a service that hosts functions/methods shared by those pages, and a service that deals with File System I/O. A given page will called the “SharedServices” Service to delete a report, which in turn calls the “FileServices” Service to remove the file from storage.

It’s been working this way without any problem, but just recently I’ve run into an issue where the “SharedServices” Service throws this TypeError when it tries to called the “deleteRecord” function in the “FileServices” Service. Everything compiles just fine, so I don’t understand where the problem is.

Posts: 1

Participants: 1

Read full topic