@pupeter wrote:

Hi there,

I´m building ionic applications at least for 2 years and always used webpack to build the application.
In the last few weeks I read a lot about parcel, but newer tried it especially not in an ionic application.
I would be very happy if anyone has experience with parcel and ionic and can share their experience.

Posts: 1

Participants: 1

Read full topic

@Ludolefrenchy wrote:

Hello,
for the connection of my app I followed this tutorial but my problem is that facebook asks me url privacy policy, my app will only be on mobile so how do I get this URL?

Thanks in advance Ludo

Posts: 1

Participants: 1

Read full topic

@domwoe wrote:

Hi,

I want to get rid of console logs in production. Therefore, I’ve added the following line to package.json

"config": {
    "ionic_uglifyjs": "./config/uglifyjs.config.js"
  },

The content of the file is the following

module.exports = {
    compress: { drop_console: true }
}

when running

ionic cordova prepare ios --prod --release --verbose

there is no output related to uglifyjs and the console.logs are still there.

Does anyone know whats wrong?

Best,
Dominic

Posts: 1

Participants: 1

Read full topic

@mayureshp wrote:

How to add ,delete and retrive data from cloud firestore in ionic 3?
can anyone please send one example

Posts: 1

Participants: 1

Read full topic

@vitalikk wrote:

Hello Ionic community,

I’m using Ionic v4 (latest version) to build a Chrome extension, everything works fine so far except print functionality. To allow users print their page, I’m opening the result page in a separate tab and use browsers default functionality window.print() to generate print preview.
The result page contain multiple ion-list elements each with around 15 to 20 ion-item + ion-card elements (example see attachment

Screen Shot 2019-02-25 at 1.29.56 PM.png2490×1630 1.1 MB

)

Now, the print preview shows only the first page. Is there any CSS hacks to make the print page show the whole content?

What I’ve already tried (nothing works for me right now):

• Several solutions for ionic v3
• dom-to-image solution

Thanks in advance!
Vitali

Posts: 1

Participants: 1

Read full topic

@MSC29 wrote:

Hi,
My app uses facebook & google sign in with firebase signInWithRedirect.

It works perfectly on an android device, but not on iOS.
On iOS I’m getting

Auth/operation not supported in this environment
This operation is not supported in the environment this application is running on. \"location.protocol\" must be http, https or chrome-extension and web storage must be enabled.

It’s important to note that login password authentication through firebase works on iOS.

I’ve tried several things, such as adding a GoogleService plist file so that my iOS app would be registered at Firebase. But it doesn’t seem to be picked up in XCode.
Not sure how this works, because the firebase javascript config object has nothing to do with the platform… maybe I’m missing something here…

I’ve tried to use in-app-browser too, but no luck either.

This works on android

<access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="*" />

Can somebody think of something I’m missing at all?

Thanks a lot
Regards

Posts: 1

Participants: 1

Read full topic

@arnhrwd wrote:

There’s a wicked bug in ion-virtual-scroll, where all the items are drawn on top of each other at the top of the page. Unfortunately I can’t reliably reproduce it but it happens when entering the tab that contains the ion-virtual-scroll, from another tab. The solution I have is to call this.virtualScroll.checkRange(0,length) on the items inside ionViewDidEnter(), however this causes the list to flicker when the tab is entered. I did indeed see it fix the bug once, where I briefly saw all items drawn on top of each other and then flickered to a correct list.

Posts: 1

Participants: 1

Read full topic

@javiersoto1797 wrote:

I have created a list of two cards, when i apply the css effects to it, it show a line in the bottom border that i cant get rid of it

<ion-card class="size1">
            <ion-item href="/home" routerDirection="forward" class="item">
              <ion-label>Menu</ion-label>
            </ion-item>
          </ion-card>

.font{
    --ion-font-family: 'NunitoSans';
  }
  .size1{
    --ion-font-size: 115%;
    --ion-font-family: 'NunitoSans';
    background-color: var(--ion-color-step-800);
  }
  ion-list{
      --ion-background-color: transparent;
  }

  .item{
    color: var(--ion-color-step-150);     // to override global variable, dont use --ion
    ion-label{
    font-weight: bold;
    }
  }

  ion-card{
    background-color: var(--ion-color-light);
    box-shadow: 3px 3px 10px var(--ion-color-light-tint);
  }
}

It is inside the app component, so these are in the variable .scss, it’s the side menu component.

Posts: 1

Participants: 1

Read full topic

@frankandrew177 wrote:

Hi guys, I find a problem to build ios all my ionic 3 projects after update ionic 4 (after ionic 4 release), and I try to generate new project (ionic 3) using this command

ionic start MyIonicProject tutorial --type=ionic-angular

, detail command you can find in the link

https://ionicframework.com/docs/v3/intro/tutorial/

, but when I try to build ios I find the same error, the error like this :

[10:51:42]  build dev finished in 14.49 s 
[10:51:45]  lint finished in 3.16 s 
> cordova build ios --release
Error
    at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:30:15)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
[ERROR] An error occurred while running subprocess cordova.
        
        cordova build ios --release exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.

,and this is my ionic info :

Ionic:

   ionic (Ionic CLI)  : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.3
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   NodeJS : v8.2.1 (/usr/local/bin/node)
   npm    : 6.8.0
   OS     : macOS High Sierra

Please, anyone help me to solve this problem.

Thanks

Posts: 1

Participants: 1

Read full topic

@demokumar wrote:

I use rating star npm which is work in ionic 3 but in ionic 4 it gives error

Posts: 1

Participants: 1

Read full topic

@ng22792 wrote:

I am trying to implement ng-idle from this answer : Set the logout time if user is inactive?

My Source code :

1. New project created. ionic start NgIdleApp blank --type=ionic-angular
2. Used the command : npm install --save @ng-idle/core
3. Changed my App.component.ts to this:

import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { HomePage } from ‘…/pages/home/home’;
import { Idle, DEFAULT_INTERRUPTSOURCES } from ‘@ng-idle/core’;

@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage:any = HomePage;

constructor(
private idle: Idle,
platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
this.idleManagement();
// 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();
});
}
idleManagement() {
// sets an idle timeout of 5 seconds, for testing purposes.
this.idle.setIdle(10);

// sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
this.idle.setTimeout(10);

// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

this.idle.onIdleEnd.subscribe(() => { console.log("No longer idle."); });
this.idle.onTimeout.subscribe(() => {
  console.log("Timed out!");
  // this.timedOut = true;
});
this.idle.onIdleStart.subscribe(() => { console.log("You've gone idle!"); });
this.idle.onTimeoutWarning.subscribe((countdown) => {
  console.log("You will time out in " + countdown + " seconds!");
});

}
}

4. used command : ionic serve
5. Image output
   
   Screenshot 2019-02-26 at 10.32.01 AM.png1099×658 34.4 KB

Error : Object(WEBPACK_IMPORTED_MODULE_0_rxjs[“fromEvent”]) is not a function. (In ‘Object(WEBPACK_IMPORTED_MODULE_0_rxjs[“fromEvent”])(target, eventName, opts)’, ‘Object(WEBPACK_IMPORTED_MODULE_0_rxjs[“fromEvent”])’ is an instance of Object)

Can anyone help me out with this?

Posts: 1

Participants: 1

Read full topic

@arsene123 wrote:

Hello,
how can I reproduce this design with ionic 4?

pro-app-screenshot-2.png1920×1066 33.2 KB

Posts: 1

Participants: 1

Read full topic

@Alemkhodadadi wrote:

hi Im building an ionic v3 app. in one of my app pages I show about 500 dots as markers in leaflet map.
the problem is when i zoom out to see the whole 500 dots in city, i see a buble made by Condensed markers. then i searches and got familiar with leaflet marker cluster. but i dont know how to use it in ionic v3.
any help? thanks!
here is my code:{}

initializeMap() {

    console.log('==> initializeMap()')
    this.platform.ready().then(() => {
        console.log("Device is ready! View did enter!");
        let options = {
            enableHighAccuracy: true,
            timeout: 2000,
            maximumAge: 0
        }
        this.geolocation.getCurrentPosition(options).then((resp) => {
            console.log("My position: " + resp.coords.latitude + ", " + resp.coords.longitude);
            this.myLocation = resp;
            this.loadmap(resp.coords.longitude, resp.coords.latitude);
        }).catch((error) => {
            this.loadmap();
        });
    });
}
loadmap(lat = 35.6892, lon = 51.3890) {
    let obj = {};
    if (lat && lon) {
        obj = {
            center: [lon, lat],
            zoom: 11
        }
    } else {
        obj = {
            zoom: 11
        }
    }
    document.getElementById('weathermap').innerHTML = "<div id='map'></div>";
    // if (!this.map)
    this.map = leaflet.map("map", obj);
    console.log('this is map')
    console.log(this.map);
    this.map.invalidateSize();

    leaflet.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attributions: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \' +\n' +
            '            \'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \' +\n' +
            '            \'Imagery © <a href="http://mapbox.com">Mapbox</a>\',',
        maxZoom: 18
    }).addTo(this.map);
    this.map.locate({
        setView: true,
        maxZoom: 18,

    })
    this.getSalonsWithLocation(this.offset);
    this.map.on('moveend', (e) => {
        this.center = this.map.getCenter();
        console.log(this.center);

    });

}

getSalonsWithLocation(offset = 0) {
    let ref = this;
    let service = 'salon';
    let body = '';
    let loading = this.loadingCtrl.create({
        content: ' بارگیری آرایشگاه ها...'
    });

    loading.present();
    this.http.postRequest(service + '/' + 'allWithLocation' + '/500/' + offset, body, true).then(res => {
        loading.dismiss();
        this.showSpinner = false;
        var data_temp: any = res;
        var array = [];
        array = this.items;
        if (data_temp) {
            if (data_temp.posts) {
                data_temp.posts.forEach(element => {
                    array.push(element);
                });
                this.items = array;
            }

            if (service == 'salon') {
                if (data_temp.salons) {
                    data_temp.salons.forEach((element, index) => {
                        array.push(element);
                        let loc = element.location[(element.location.length -1)];
                        console.log('loc', loc);
                        var marker = leaflet.marker([loc.lat, loc.lng]).addTo(this.map);
                        marker.bindPopup("<b>" + element.name + "</b>").openPopup();
                        marker.on("click", function (event) {
                            ref.showSalonDatas(element, index);
                            // console.log('clicked on ', element);
                            // element.expand = 'expand';
                            // element.type = 'salon';
                            // ref.app.getRootNav().push(SingleBussinessPage, { item: element });
                            // do some stuff…
                        });
                    });
                } else {
                    this.offset = this.offset - 10;
                }
                // this.items = array;
                console.log('here we go!');
            }
        }
        if (this.items.length == 0) {
            console.log('==> check this.items.length', this.items.length)
            this.show_nothing = true;
        } else {
            this.show_nothing = false;
        }

    });
}

Posts: 1

Participants: 1

Read full topic

@obinnae wrote:

Hello, I’m trying to figure out why my Ionic 3 app’s homepage loads 4 times. Basically it’s an app with 4 tabs, the first tab being the homepage. Here’s part of the constructor of app.component.ts

 platform.ready()
       .then(() => this.initializeFB())
       .then(() => this.initializeHockeyApp())
       .then(() => this.setUserForMenu())
       .then(() => this.checkNetwork())
       .then(() => this.initializeTheApp())
       .then(() => this.initializeFirebase())
       .then(() => this.navigation.initRootNav(this.nav))
       .then(() => this.setRoot());

Each of those functions are defined underneath, such as

private async initializeFB()
  { console.log("initializeFb");
    const fbConf = {
      apiKey: sfConfig.firebase.apiKey,
      authDomain: sfConfig.firebase.authDomain,
      databaseURL: sfConfig.firebase.databaseURL,
      storageBucket: sfConfig.firebase.storageBucket,
      messagingSenderId: sfConfig.firebase.messagingSenderId
    };
    await firebase.initializeApp(fbConf);
    const unsubscribe = await firebase.auth().onAuthStateChanged(user => {
      if (!user){
        console.log("Going to login page");
        this.rootPage = 'Login';
        unsubscribe();
      } else {
        console.log("Going to tabsHome page");
        this.rootPage = 'TabsHome';
        unsubscribe();
      }
    });
    console.log("/initializeFb");
  }

/***
... the other functions...
**/

  private async setRoot()
  {
    console.log("setRoot");
    //So app doesn't close when hockey app activities close
    //This also has a side effect of unable to close the app when on the rootPage and using the back button.
    //Back button will perform as normal on other pages and pop to the previous page.
    this.platform.registerBackButtonAction(async x => {
      let nav = this.app.getRootNav();
      if (nav.canGoBack()) {
        await nav.pop();
      } else {
        await nav.setRoot(this.rootPage);
      }
    }); //registerbackbutton
    console.log("/setRoot");
  }

The tabs home contains the 4 tabs, first being home.ts. Home.ts has console.log(“hello home”) among other things.
When the app loads, “hello home” is logged 4 different times! The only time it should ever load is within the setRoot() function above, but it seems to be called at random times.

How do I force it to call just once in setRoot()?

Thanks.

Posts: 1

Participants: 1

Read full topic

@ninecmoi wrote:

Hi,

i’m using ionic v4 + capacitor
when i ionic serve my app, it’s working well on browser
but when i ionic cap open ios, it’s partially not work …

i have a list i have to create and display. its not working, when i create add and save an element to this list i have an strange error displayed on Xcode :

⚡️  [log] - create campagne ..........
⚡️  [log] - fonction save........
⚡️  [log] - toutes les campagnes [{"id":"1","nom":"Test 1","date":"26/2/2019","heure_debut":"9:44","heure_fin":"","comment":"","collecteurs":"Nd","tirages":[]}]
⚡️  [error] - ERROR {"line":1294,"column":26,"sourceURL":"capacitor://localhost/main.js"}
To Native Cordova ->  SQLitePlugin backgroundExecuteSqlBatch SQLitePlugin59564011 ["options": [{
    dbargs =     {
        dbname = "_ionicstorage";
    };
    executes =     (
                {
            params =             (
            );
            qid = "<null>";
            sql = BEGIN;
        },
                {
            params =             (
                campagnes,
                "[{\"id\":\"1\",\"nom\":\"Test 1\",\"date\":\"26/2/2019\",\"heure_debut\":\"9:44\",\"heure_fin\":\"\",\"comment\":\"\",\"collecteurs\":\"Nd\",\"tirages\":[]}]"
            );
            qid = "<null>";
            sql = "INSERT OR REPLACE INTO _ionickv (key, value) VALUES (?, ?)";
        }
    );
}]]
To Native Cordova ->  SQLitePlugin backgroundExecuteSqlBatch SQLitePlugin59564012 ["options": [{
    dbargs =     {
        dbname = "_ionicstorage";
    };
    executes =     (
                {
            params =             (
            );
            qid = "<null>";
            sql = COMMIT;
        }
    );
}]]

this is the part of code which is on error (function save of data service) :

public save(): void {
    console.log('fonction save........');
    this.storage.set("campagnes", this.campagnes);
    console.log("toutes les campagnes", this.campagnes);
    // this.myCampagnes.next(this.campagnes);
 
    
    let uc = this.campagnes.filter(
      c =>
      c.user.site === this.user.site &&
      c.user.email === this.user.email
      );

    console.log('user campagne= ', uc);
    console.log("fin..........");
  }

it seems that the section with filter campagnes not working …
an idea ?
Thank you
nine

Posts: 1

Participants: 1

Read full topic

@AmrAlmagic wrote:

I’m using ionic v3 .
I setup facebook plugin and package .
i try to login get this errors

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Object(…) is not a function
TypeError: Object(…) is not a function
at Facebook.webpackJsonp.486.Facebook.login (index.js:27)
at LoginButtonsComponent. (login-buttons.ts:69)
at step (components.module.ts:26)
at Object.next (components.module.ts:26)
at fulfilled (components.module.ts:26)
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4760)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at c (polyfills.js:3)
at polyfills.js:3
at fulfilled (components.module.ts:26)
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4760)
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 (core.js:4751)

my code is

import { Facebook } from ‘@ionic-native/facebook/ngx’;
async loginWithFacebook() {
console.log(‘www’);

const loading = await this.loadingController.create({
content: ‘Please wait…’
});
await loading.present();
// let permissions = new Array<string>();

//the permissions your facebook app needs from the user
let permissions = [‘public_profile’, ‘user_friends’, ‘email’];

this.fb.login(permissions)
.then((response ) => {
console.log(‘qqq’);
let userId = response.authResponse.userID;

//Getting name and gender properties
this.fb.api("/me?fields=name,email", permissions)
.then(user => {
user.picture = “https://graph.facebook.com/” + userId + “/picture?type=large”;
//let patient = user;

//now we have the users info, let’s save it in the storage
this.restProvider.faceBookLogin(user.email)
.subscribe(res => {

//return from reset api after check patient
let patient = res.data;
this.storage.set(‘token’,
patient.token)
//after successfully save token save patient data
.then(() => {
this.storage.set(‘patient_info’,
{
photo: user.photo,
code: patient.code,
name: user.name,
email: user.email,
facebook: true
})

}).catch(error => console.error(‘Error storing item’, error));

this.navCtrl.setRoot(‘TabsPage’);
loading.dismiss();
}, err => {
loading.dismiss();
console.log(err);
});

})
}, error => {
console.log(error);
loading.dismiss();
});
}

Posts: 1

Participants: 1

Read full topic

@bhag25 wrote:

Screenshot (283).png1366×768 105 KB

here’s my html code

  <ion-list>
          <ion-item-sliding>
             <ion-input type="text" id="h1">ON SALE</ion-input>
                   <ion-item *ngFor="let product of products"> 
                     <ion-thumbnail slot="start">
                      <ion-img [src]="product.url"></ion-img>
                     </ion-thumbnail>
                      {{product.title}} - ${{product.price}}
                   </ion-item>
          </ion-item-sliding>
      </ion-list>

Posts: 1

Participants: 1

Read full topic

@fahd123 wrote:

Code HTML

 <div  *ngFor='let user of arrayUser'>
    <form (ngSubmit)="UpdateMe()" >

        <ion-item>
          <ion-label>Nom</ion-label>
          <ion-input type="text" [(ngModel)]="user.nom"  name='nom' ></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Prenom</ion-label>
          <ion-input [(ngModel)]="user.prenom" name="prenom"></ion-input>
        </ion-item>

 <ion-button ion-button type="submit" color='secondary' expand="full" block >Update</ion-button>
</form>
</div>

Code ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Storage } from '@ionic/storage';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'app-update-user',
  templateUrl: './update-user.page.html',
  styleUrls: ['./update-user.page.scss'],
})
export class UpdateUserPage implements OnInit {

  constructor(
   private Http: HttpClient,
   private storage: Storage,


  ) { }
  apiUrl='xxxxxxxxxxxxxxxx/mobile/myName.php';
 
  arrayUser:any;
  nom:string='';
  user={};

  ngOnInit() {

    this.storage.get('id').then((val) => {
      

      this.Http.post(this.apiUrl,JSON.stringify(val)).subscribe(data=>{
       this.arrayUser=data;
       

      });
    });
  }


  UpdateMe(){  
    console.log(user);
  }


}

console.log(user) get data empty

Posts: 1

Participants: 1

Read full topic

@arsene123 wrote:

the question defines all my will of work, need help please.

Posts: 1

Participants: 1

Read full topic

@markodemo wrote:

Is there a way to hash string using .p12 certificate?
I have .p12 certificate file with password protected, i want to hash some string with it.

Posts: 1

Participants: 1

Read full topic