@MarkGSmith64 wrote:

I have started a new blank ionic app and have tried to integrate Firebase for push notifications but am getting an error when trying to set Firebase as a provider.

I have installed Firebase according to the docs, i.e:

ionic cordova plugin add cordova-plugin-firebase
npm install --save @ionic-native/firebase

and my app.module.ts is

Screenshot 2019-01-29 at 12.17.35.png1186×1006 147 KB

but I get an error

[ts]
Type 'FirebaseOriginal' is not assignable to type 'Provider'.
  Type 'FirebaseOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]
(alias) const Firebase: FirebaseOriginal
import Firebase

I have tried ionic 3 and 4 and the same error occurs.

Help much appreciated.

Posts: 1

Participants: 1

Read full topic

@mohanajna wrote:

Only its installing when platform not added if it is added we need to remove platform then only its adding to it.

After installing it’s getting an error in Module itself while declaring

Posts: 1

Participants: 1

Read full topic

@pettrin wrote:

Example on android/Browser

Works Fine on Android

Example On Ios

Not work as well

page.html

<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
    <ion-navbar color="ticket-blue-rainbow" >
        <ion-row>
            <ion-title> {{ evento.descricao }}</ion-title>
            <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
            <ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
            <ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
        </ion-row>
    </ion-navbar>
</ion-header>

page.scss

 .padding-icon {
    padding-right: 15px;
    font-size: 20px;
  }

Second change in

page.html

<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
    <ion-navbar color="ticket-blue-rainbow" >
        <ion-row>
            <ion-title> {{ evento.descricao }}</ion-title>
            <ion-buttons right>
                <button ion-button>
                    <ion-icon name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
                </button>
                <button ion-button>
                    <ion-icon  name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
                </button>
                <button ion-button>
                    <ion-icon name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
                </button>
            </ion-buttons>
        </ion-row>
    </ion-navbar>
</ion-header>

But still not working!

Posts: 1

Participants: 1

Read full topic

@d4h wrote:

Hey!

In our application, I’ve noticed that Ionic appears to go to a cached version of the view. How do I prevent this? ngOnInit and ngOnDestroy do not fire during these navigation events. In particular the login form does not reset state. It uses a FormGroup form built in ngOnInit.

The form requires the user to

1. Input their username.
2. Select the server to connect to.

Ionic presents this view in its cached (completed) form after the user logs out, when what I expect the user to see is a pristine form. As I stands, if a user wants to proceed then they have to manually clear and re-enter their choices of server and username.

How can I prevent or change this caching strategy?

In the above screenshot, the form presents in a valid and submittable state despite that the data is not valid.

  ngOnInit(): void {
    this.form = this.formBuilder.group(
      {
        username: [
          environment.credentials.username, [
            Validators.required,
            Validators.minLength(this.minUsernameLength)
          ]
        ],
        server: [
          undefined, [
            Validators.required
          ]
        ]
      },
      {
        asyncValidator: [
          ValidateUsername.exists(this.accountService)
        ]
      }
    );

    this.subscription = this.form.controls.server.valueChanges
    .pipe(filter(Boolean))
    .subscribe(server => this.servers.active(server));
  }

Posts: 1

Participants: 1

Read full topic

@SMC wrote:

For Ionic 4 I can’t find anything about how to enable Swipe to go back like Ionic 3 has on by default. I’ve found a github issue where it’s said it is now in Ionic 4. But there is nothing the docs.

Also, the page transition by default is like modal from bottom up. Is there any information out there how to change these default behaviors now that Ionic 4 is fully released?

Posts: 1

Participants: 1

Read full topic

@Doate12 wrote:

Hi.everyone i hope you’re having a good day

I was trying the notification plugin of OneSignal on Ionic, i’ve already installed, i also removed the “node_modules” folder and used “npm install” to reinstall everything again but i cant make it work because i don’t know how to fix this error (image below) Someone has any information how to solve this?

Thanks in advance!

1232.PNG870×485 16.9 KB

Posts: 1

Participants: 1

Read full topic

@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

@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: 1

Participants: 1

Read full topic

@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

@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

@CreativeArtDesign wrote:

How would you Parse an XML in IONIC 4?

Or is it a better way to do it?

Posts: 1

Participants: 1

Read full topic

@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

@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

@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 ?

Thanks by advance

Posts: 1

Participants: 1

Read full topic

@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… the page loads “Empty” with an error in Chrome dev console.

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

Screen Shot 2019-01-29 at 10.10.51 AM.png1489×339 48.1 KB

Posts: 1

Participants: 1

Read full topic

@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 ‘http://example.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

My code for Iframe is

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

can you help me in this please?

Posts: 1

Participants: 1

Read full topic

@ricardoeenda wrote:

I have a problem with external links in my ionic app. This not working when I run my App in a iOS emulator or when I install my debug App in mu iPhone.

I have similar problems in Android app.

I have in my config.xml file this:

I tried also with allow-indent

In my code I use:

this.inAppbrowser.create(enlace,’_system’, ‘location=yes’);

And I try also:

this.window.open(enlace,’_system’, ‘location=yes’);

¿Any idea about that?

Posts: 1

Participants: 1

Read full topic

@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

@JorchDeveloper wrote:

image.png1280×1024 146 KB

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

image.png1280×1024 114 KB

Si descomento …

image.png1280×1024 130 KB

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: 1

Participants: 1

Read full topic

@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