Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 48979 articles
Browse latest View live

Ios 12 and cordova-plugin-firebase

$
0
0

@ange-marie wrote:

Hello,

J’ai un petit problème, j’ai fait une application avec ionic qui utilise de nombreux plugin. Lorsque je la compile en android ou ios tout ce passe bien. Lorsque je la lance en Android elle fonctionne.

Mais j’ai un problème (sinon je ne serais pas là), lorsque je la lance en ios avec la commande

ionic cordova emulate  ios -- --buildFlag="-UseModernBuildSystem=0"

elle s’ouvre et se ferme automatiquement. En cherchant bien j’ai appris que cela venais de l’un de mes plugin natif. J’ai donc désinstaller tout mes plugin et les aient ré-installer un par un en testant entre chaque. C’est là que je me suis aperçu que le problème venait de mon plugin firebase. Or, j’en ai besoin pour les notification.

Quelqu’un aurait il déjà eu ce problème ? Si oui pouvez vous me donner des pistes ?

Pour infos: j’ai fait des recherche et certaines personnes ont utiliser le plugin fcm, mais pour moi ça ne fonctionne pas…

Et j’utilise la version 12 ios

Merci d’avance

Posts: 1

Participants: 1

Read full topic


Ionic 4 documentation is poor

$
0
0

@tobi418 wrote:

I did not understand following documentation

in Usage section there is no controller file code sample it has only html sample

I want to control tabs from my .ts code, I need to get selected active tab and change another tab by code. How to do help me please!

Posts: 2

Participants: 2

Read full topic

Ionic cordova run with –prod stuck at splash for iOS and Android

$
0
0

@jafsab wrote:

I have problem when I build the app using --prod flag for both iOS and android it stuck and freeze on splash screen, can any one help me please. below my xml and json file.

<preference name=“ScrollEnabled” value=“false” />
<preference name=“android-minSdkVersion” value=“19” />
<preference name=“BackupWebStorage” value=“none” />
<preference name=“SplashShowOnlyFirstTime” value=“false” />
<preference name=“SplashScreen” value=“screen” />
<preference name=“SplashScreenDelay” value=“3000” />
<preference name=“loadUrlTimeoutValue” value=“70000” />
<preference name=“FadeSplashScreen” value=“false” />
<preference name=“AutoHideSplashScreen” value=“false” />
<preference name=“SplashMaintainAspectRatio” value=“true” />
<preference name=“FadeSplashScreenDuration” value=“800” />

and package.json

{
“name”: “”,
“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”: {
@agm/core”: “^1.0.0-beta.5”,
@agm/snazzy-info-window”: “^1.0.0-beta.5”,
@angular/animations”: “7.1.4”,
@angular/common”: “7.1.4”,
@angular/compiler”: “7.1.4”,
@angular/compiler-cli”: “7.1.4”,
@angular/core”: “7.1.4”,
@angular/forms”: “7.1.4”,
@angular/http”: “7.1.4”,
@angular/platform-browser”: “7.1.4”,
@angular/platform-browser-dynamic”: “7.1.4”,
@ionic-native/camera”: “^4.18.0”,
@ionic-native/core”: “^4.18.0”,
@ionic-native/device”: “^4.18.0”,
@ionic-native/firebase”: “^4.18.0”,
@ionic-native/geolocation”: “^4.18.0”,
@ionic-native/google-plus”: “^4.18.0”,
@ionic-native/in-app-browser”: “^4.18.0”,
@ionic-native/keyboard”: “^4.18.0”,
@ionic-native/launch-navigator”: “^4.18.0”,
@ionic-native/photo-viewer”: “^4.18.0”,
@ionic-native/screen-orientation”: “^4.18.0”,
@ionic-native/social-sharing”: “^4.18.0”,
@ionic-native/splash-screen”: “~4.18.0”,
@ionic-native/status-bar”: “~4.18.0”,
@ionic/storage”: “2.2.0”,
@ngx-translate/core”: “^11.0.1”,
@ngx-translate/http-loader”: “^4.0.0”,
@servicestack/client”: “^1.0.15”,
@types/googlemaps”: “^3.30.16”,
“com-sarriaroman-photoviewer”: “1.1.18”,
“cordova-android”: “7.1.4”,
“cordova-browser”: “5.0.4”,
“cordova-ios”: “4.5.5”,
“cordova-plugin-actionsheet”: “^2.3.3”,
“cordova-plugin-camera”: “^4.0.3”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-dialogs”: “^2.0.1”,
“cordova-plugin-firebase”: “^2.0.5”,
“cordova-plugin-geolocation”: “^4.0.1”,
“cordova-plugin-inappbrowser”: “^3.0.0”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “^3.1.1”,
“cordova-plugin-screen-orientation”: “^3.0.1”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“cordova-plugin-x-socialsharing”: “^5.4.4”,
“es6-promise-plugin”: “^4.2.2”,
“ionic-angular”: “3.9.2”,
“ionic3-star-rating”: “^1.1.5”,
“ionicons”: “4.5.5”,
“jquery”: “^3.3.1”,
“moment”: “^2.24.0”,
“ng2-simple-global”: “^1.2.5”,
“ngx-moment”: “^3.3.0”,
“rxjs”: “6.3.3”,
“rxjs-compat”: “^6.3.3”,
“snazzy-info-window”: “^1.1.1”,
“socket.io-client”: “^2.2.0”,
“sw-toolbox”: “3.6.0”,
“uk.co.workingedge.phonegap.plugin.launchnavigator”: “^4.2.2”,
“zone.js”: “0.8.29”
},
“devDependencies”: {
@ionic/app-scripts”: “3.2.1”,
@ionic/lab”: “1.0.19”,
“gradle”: “^1.0.9”,
“typescript”: “3.1.6”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-keyboard”: {},
“cordova-plugin-screen-orientation”: {},
“cordova-plugin-geolocation”: {},
“cordova-plugin-inappbrowser”: {},
“cordova-plugin-camera”: {},
“cordova-plugin-x-socialsharing”: {
“ANDROID_SUPPORT_V4_VERSION”: “24.1.1+”
},
“uk.co.workingedge.phonegap.plugin.launchnavigator”: {
“OKHTTP_VERSION”: “3.+”,
“LOCATION_USAGE_DESCRIPTION”: “This app requires access to your location for navigation purposes”
},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
},
“cordova-plugin-firebase”: {},
“com-sarriaroman-photoviewer”: {}
},
“platforms”: [
“browser”,
“android”,
“ios”
]
}
}

Posts: 2

Participants: 2

Read full topic

Problem adding Geolocation on my Project -TS2345

$
0
0

@Jalvarez05 wrote:

Hello everyone .

I am trying to follow this tutorial :

And when I’ve added the Geolocation plugin, I imported that on my app.module.ts like this I get error : TS2345

import {Geolocation} from “@ionic-native/geolocation”;

and in my provider :

providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Geolocation
]

Package.json information :

“ionic-angular”:“3.9.2”,
“cordova-plugin-geolocation”:“4.0.1”,

The error is : http://prntscr.com/mdscwj

Ionic cli version is : 4.8.0

I’ve tried:

  1. downgrade you cli npm install -g ionic@4.8.0 , because I’ve had 4.9.0 first

Any idea ?

Thank you ind advance

Posts: 1

Participants: 1

Read full topic

How would you Parse an XML in IONIC 4?

Uploading pic to firebase

$
0
0

@lunneyd wrote:

It was working but now when I take a picture the pic does not upload to firebase. Could I have deleted something important on firebase console.

   import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { EventProvider } from '../../providers/event/event';
import { Camera } from '@ionic-native/camera';
import * as firebase from 'firebase/app'
 import 'firebase/storage'


@IonicPage({
 segment: 'event-detail/:eventId'
})
 @Component({
  selector: 'page-event-detail',
  templateUrl: 'event-detail.html'
})
  export class EventDetailPage {
  public currentEvent: any = {};

path: string;
pathToPicture: string;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public eventProvider: EventProvider,
public cameraPlugin: Camera

) {}

ionViewWillEnter() {
this.eventProvider
.getEventDetail(this.navParams.get(‘eventId’))
.on(‘value’, eventSnapshot => {
this.currentEvent = eventSnapshot.val();
this.currentEvent.id = eventSnapshot.key;
this.pathToPicture = eventSnapshot.val().genre;
});

var ProfilePicture = this.navParams.get('eventId');
firebase.database().ref(`/images`).once('value',(snapshot) => {
  if(snapshot.val()[ProfilePicture]) {
    this.path=snapshot.val()[ProfilePicture];
  }
});

if(!(this.path)){
  if(this.pathToPicture === "Sport"){
    this.path ="assets/img/sport.jpg";
    console.log(this.path);
  }
  else if(this.pathToPicture === "Music"){
    this.path ="assets/img/music.jpg";
    console.log(this.path);
  }
  else if(this.pathToPicture === "Comedy"){
    this.path ="assets/img/comedy.jpg";
    console.log(this.path);
  }
  else if(this.pathToPicture === "Art"){
    this.path ="assets/img/art.jpg";
    console.log(this.path);
  }
  else{
    this.path ="assets/img/other.jpg";
    console.log(this.path);
  }
}

}

takeEventPicture(): void {
this.cameraPlugin.getPicture({
quality: 95,
destinationType: this.cameraPlugin.DestinationType.DATA_URL,
sourceType: this.cameraPlugin.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: this.cameraPlugin.EncodingType.PNG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: true
}).then(profilePicture => {
// Send the picture to Firebase Storage/userProfile/{this.results[text]}` const selfieRef = firebase.storage().ref(`images/{this.navParams.get(‘eventId’)}`);
console.log(selfieRef);

  selfieRef.putString(profilePicture, 'base64', {contentType: 'image/png'})
    .then(savedProfilePicture => {
      firebase
        .database()
        .ref(`images/${this.navParams.get('eventId')}`)
        .set(savedProfilePicture.downloadURL);
      this.path = savedProfilePicture.downloadURL;
    });
});

}
}

Posts: 1

Participants: 1

Read full topic

Edit photography - Native Camera - Ionic 3

$
0
0

@sarias980 wrote:

Hi,

I’m using Ionic 3 and I need make a photo and draw in this like in whatsapp.

Any idea please ?

Posts: 1

Participants: 1

Read full topic

Render CSV parsed with Papaparse into HTML

$
0
0

@admintgsgroup wrote:

I’m working with Ionic 3 and I need to visualize a CSV in my app. I used Papaparse to read the file and I got them with console.log(this.csvData)

But I can’t show them in the HTML file (the space in blank should show the table with the info). All I want is a table with the info of the CSV file local store. If you can see headerRow and csvData are empty when calling {{headerRow}} and {{csvData}} in HTML. The thing is I can’t access to both arrays to render them.
I’m using Ionic 3 with Angular 5.

this is part of my .ts file ;

export class myPage {
csvData: any[] = [];
headerRow: any[] = [];
url = 'assets/json/data.csv'; 
constructor(public navCtrl: NavController, public navParams:
    NavParams, private httpClient: HttpClient, 
    public modalController: ModalController) {
        this.extract() 
}
private extract(){
Papa.parse(this.url, {
  download: true,
  complete: function(results) {
    this.csvData=results.data;  
    this.headerRow = this.csvData[0]; 
    this.csvData.splice(0, 1); 
    console.log(this.csvData);  
    console.log(this.headerRow);  
    }
});
}
}

this is part of my .HTML file :

<ion-content>
 <ion-item> 
        <div  class="data-scroll">
            <table border="1" class="data-table">
                  <tr>
                    <td *ngFor="let row of headerRow; let i = index" text-center>
                      <b> {{ row }} </b>
                    </td>
                  </tr>    
                  <tr  *ngFor="let row of csvData; let i = index" >
                    <td *ngFor="let item of row; let j = index"> 
                      {{row}} 
                    </td>
              </table>
      </div>   
  
      <br>
      header: 
      {{ headerRow | json }}
      csvData: 
      {{ csvData | json  }}
    </ion-item> 
  </ion-item> 
</ion-content>

Posts: 3

Participants: 2

Read full topic


Models and providers in Ionic

$
0
0

@laurineWermann wrote:

Hello,

I am doing an app that uses models. These models define objects that can correspond either to database or json send by a server. I have two providers, one for the connexion with server and one other for the connexion with database. I have class like this :

export class fooModel {

constructor(public Id: number, public bar: number) { }

getById(server: ServerProvider, id: number): Promise<any>  {
     server.http.post(`${server.UrlServer}/foo}`, {id: id})
    .toPromise().then(data => {
        //return serialisation
    })
}

}

My problem is, everytime I need to use getbyid, i need to pass server provider (and same for dtb provider). My application was made in Ionic 3 but I recently passed in Ionic 4, so I had to resolve some circular dependencies that was not a problem before. I decided to pass some datas in another provider than server. But it is called in every models and I now see the problem with passing same object everywhere, I have to change all the calls.

Is there a better way to make Ionic models, I mean without passing 3 providers everytime ?
I can migrate all static functions in a “foomodelprovider” but taht means that, for all on static functions of my model, i have to pass the object fooModel to the provider, that sounds strange

Thanks by advance

Posts: 1

Participants: 1

Read full topic

How to use Ionic CSS and JS without CDN in a static website?

$
0
0

@surenkonathala wrote:

How to include the CSS and JS in a static website without using CDN url’s?

When we tried to download the JS file to local and refer it <script type='text/javascript' src="ionic.js"></script> the page loads “Empty” with an error in Chrome dev console. The same works when referred from CDN.

Downloaded the js file from https://unpkg.com/@ionic/core@4.0.0/dist/ionic.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- <script src="https://unpkg.com/@ionic/core@4.0.0/dist/ionic.js"></script> -->
    <script type='text/javascript' src="ionic.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0/css/ionic.bundle.css">
  </head>
  <body>
    <ion-title>Sample Title</ion-title>
  </body>
</html>

Posts: 1

Participants: 1

Read full topic

How to solve 'x-frame-options' to 'sameorigin' in ionic4 for Iframe?

$
0
0

@nadeemmdsol wrote:

I am trying to use some URL in Iframe, But when i try to embed that Iframe in Ionic4 app, i got this error.

Refused to display ‘https://twitter.com/afdonews’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

My code for Iframe is

<iframe width="100%" height="100%" src="https://twitter.com/afdonews" scrolling="no" style="border: 0;" (load)="hideLoading()">
</iframe>

can you help me in this please?

Posts: 1

Participants: 1

Read full topic

Playing media resource 'audio/x-mpegurl'

$
0
0

@NorthFred wrote:

Does anyone know a JavaScript library that would work with streaming / playing audio media of type ‘audio/x-mpegurl’ (mp4a). I tried the Ionic audio plugins, but none of them work with this type of media. I also tried Howler.js, ease-audio and some more, all without positive result.

Any ideas?

Posts: 1

Participants: 1

Read full topic

Ionic module.app problems

$
0
0

@JorchDeveloper wrote:

Okay tengo aqui los imports de mi module.app
Sin embargo en el provider miren lo que ocurre si descomento alguno de los plugin que tengo comentados

Si descomento …

Todo el ngModel me da error.

El problema es que esto me funcionaba en una versión anterior a mi proyecto pero ahora si intento instalar cualquiera de los plugin que están comentados al principio en cualquier versión del proyecto ya no funciona y me sale ese error de tipos no coincidentes.

He actualizado ionic, cordova, plugins, reinstalado los plugin, he mirado en mil sitios y no hay nada que se parezca a esto. Alguien sabe que puede ser. Si necesitan algo mas diganmelo.

Como información adicional el proyecto empezó en ionic 3 y he ido actualizando sin problemas todas las versiones.

Posts: 2

Participants: 2

Read full topic

I've installed all sqlite cli but ionic doesnt see SQLite just see SQLiteOriginal and SQLiteObject

$
0
0

@hasankilic wrote:

Hi everyone, i’ve problem. I’ve read a lot of issues but anyone doesn’t say this problem.
I’ve imported all package in app.module and database provider. but again appdoesnt see sqlite.
I’m getting this error in my database provider:
Uncaught Error: Can’t resolve all parameters for DatabaseProvider: ([object Object], ?, [object Object]).

these are my package:
import { SQLite, SQLiteObject } from ‘@ionic-native/sqlite’;
import ‘rxjs/add/operator/map’;
import { Storage } from ‘@ionic/storage’;

My Constructor here:

constructor(private storage: Storage, private sqlite:SQLite (Doesnt see) , private http: Http) {
this.sqlite.create({
name:‘todo.db’,
location:‘default’
}).then(
(db:SQLiteObject)=>{
db.executeSql(‘CREATE TABLE IF NOT EXISTS todo (ID INTEGER PRIMARY KEY AUTOINCREMENT,title TEXT,desc TEXT)’,);
this.database=db;
alert(“DB Oluşturuldu”);
}
);
}

Please help me.
Thanks.

Posts: 1

Participants: 1

Read full topic

Settings provider defaults

$
0
0

@ESSADJI wrote:

What is the best practice to use _defaults in the settings provider (included in the starter app demo)
In other words, where and how can those defaults be defined?

Posts: 1

Participants: 1

Read full topic


Ionic 4: how to switch between two tabbars?

$
0
0

@AndreasK wrote:

In Ionic 3 it was pretty easy to switch between different tab bars simply by assiging a new compontent to the root propert: <nav [root]="rootPage"></nav> in app.component.html.
In Ionic 4 I though it should just as easy as defining two different routes:

  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }, // default tabbar
  { path: 'tabs2', loadChildren: './tabs2/tabs2.module#Tabs2PageModule' }

Tabs2PageModule holds the same content as TabsPageModule (ionic starter tabs) by just changing the module name and route prepending ‘2’.
But this its not as soon as I try to activate the route tabs2 I’ll get an error: "Cannot match any routes. URL Segment: ‘tabs2/tab1’
Any idea whats going wrong and how to make it work?

Posts: 1

Participants: 1

Read full topic

Transparent status bar on iPhone X

Ionic v4 PWA: Dealing with root page and physical back button

$
0
0

@aguiarguilherme wrote:

Hi there, Ionicists!

I’m developing a PWA using the v4 (with ng 6.x) with a team. We’re currently close to the end of development for the first phase, but there is a bottleneck we are facing.

Imagine that our current flow of screens is the following: (Yes, there is some kind of exaggeration on the login stuff, but we were required by our customer to follow a pattern they already have on a working software, specially due to our target users)

  • pre-login: The user is prompted to continue authentication or as a guest, which has limited features. It’s the root page when they open the app.
  • login: If the user decides to log in, they input user/password and reset it thru this screen.
  • home: A home screen, with our customer logo and directions to our features, version etc. Just dummy static content. Should be our new root page after log in as authenticated/guest
  • [feature screen]: screens with features required by our customer, such as graphs, data and such.

Our issue is: I was supposed to set the root page before login to our pre-login page, and after the user is authenticated, on home page, so that when they hit the back button, it goes to the root page.

If user goes: HomePage > FirstPage > SecondPage and hit back, they return to home instead of FirstPage or the level of screens he has navigated through - and if they hit again at HomePage, it should close the PWA.

I tried almost everything I saw on forums and internet. Using navigateRoot, changing the Router.navigateByUrl() calls, and such but i can’t get this behavior to work.

Also, platform.backButton.subscribe() doesn’t get triggered on the PWA.

Any tips on how to deal with it? I’m also attaching our app-routing-module.ts for reference.

import { AuthService } from '@services';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PreLoginComponent, OidcComponent, RedirectSilentRenewComponent } from '@components';

const routes: Routes = [
    {
        path: '',
        loadChildren: './pages/pre-login/pre-login.module#PreLoginPageModule',
    },
    {
        path: 'home',
        loadChildren: './pages/home/home.module#HomePageModule',
    },
    {
        path: 'lista-atracacao',
        loadChildren: './pages/lista-atracacao/lista-atracacao.module#ListaAtracacaoPageModule',
    },
    {
        path: 'login',
        loadChildren: './pages/login/login.module#LoginPageModule',
    },
    {
        path: 'yard-kpi',
        loadChildren: './pages/yard-kpi/yard-kpi.module#YardKpiPageModule',
        canActivate: [AuthService],
    },
    {
        path: 'gestao-a-vista',
        loadChildren: './pages/gestao-a-vista/gestao-a-vista.module#GestaoAVistaPageModule',
        canActivate: [AuthService],
    },
    {
        path: 'retencao',
        loadChildren: './pages/retencao/retencao.module#RetencaoPageModule',
        canActivate: [AuthService],
    },
    {
        path: 'tracking-carga',
        loadChildren: './pages/tracking-carga/tracking-carga.module#TrackingCargaPageModule',
        canActivate: [AuthService],
    },
];
routes.push({
    path: '**',
    redirectTo: 'home',
});

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

Posts: 1

Participants: 1

Read full topic

Solved problem

$
0
0

@hasankilic wrote:

i think new update has caused this problem.
We should add;

import { SQLite, SQLiteObject } from ‘@ionic-native/sqlite/ngx’

Posts: 1

Participants: 1

Read full topic

Create gif with gallery images

$
0
0

@slmarcos wrote:

Hello, I need to create a gif using some pictures taken by the camera, does anyone have any idea how I can generate this gif and save it to the device?
Tnks

Posts: 1

Participants: 1

Read full topic

Viewing all 48979 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>