@jjdev wrote:

I am trying to optimize my app with lighthouse

I have added

<link rel="manifest"  href="./manifest.json">

to the index.html

then i have manifest.json as follows

{
    "name": "Ionic App",
    "short_name": "Ionic App",
    "theme_color": "#222428",
    "background_color": "#000000",
    "display": "standalone",
    "scope": "/",
    "start_url": "/index.html",
    "splash_pages": null,
    "orientation": "portrait",
    "icons": [
        {
            "src": "/assets/icons/favicon.png",
            "type": "image/png",
            "sizes": "192x192"
          }
    ]
}

I have tried compiling with the manifest file in the root and in src/
When i build with --prod --release and deploy to firebase, get the following error

Manifest: Line: 1, column: 1, Unexpected token.

and the lighthouse audit scores Performance 18 and PWA 31, and the rest of the scores are green

Does anyone have any insight into optimizing an Ionic app for PWA status? I have followed several tutorials to no avail and its driving me crazy.
here is a screenshot of the audit

Screenshot from 2019-02-09 17-27-50.png750×753 69.1 KB

Posts: 1

Participants: 1

Read full topic

@agustin-bravo wrote:

Hi everybody, I expect you are doing great!

I am new with ionic and looking for some help from you.

Please, could you tell if its possible to integrate this JS calendar with ionic v4? Here is the link: https://www.npmjs.com/package/flex-calendar

I tried following the detailed steps, but I dont know how to include the calendar module into the main module.

This is what I have done so far:

1. execute npm i flex-calendar in the console

2. Added this to index.html

<link rel=“stylesheet” href=“bower_components/flex-calendar.css”>

<script type=“text/javascript” src=“bower_components/angular-translate/angular-translate.min.js.js”></script>

<script type=“text/javascript” src=“bower_components/flex-calendar.js”></script>

3. And here is the supposed step to inject the module into the main module
   • angular.module(‘App’, [‘flexcalendar’])

I am not quite sure of how to do it, if anyone could give and example of how to make I would really appreciate. I am stacked at this point since long time. I have a calendar tab and my idea is to add this calendar in it.

Many thanks!!
Agus

Posts: 1

Participants: 1

Read full topic

@RomnEmpire wrote:

Hi,
I have to load the PFD data in the HTML content using iframe, it is working properly in the localhost but after generating the build, pdf data is not loading in the body section of the HTML.i have attached both local and server screenshots, in local data, is loaded but in the server it didn’t work. Can you guys please help to solve my issue.

Check below screenshort 1st scscreenshort show after generated APK and not load data document setion is blank:

QRcVO.png1350×889 250 KB

2nd is that the local in which data load properly:

ZdvEH.png1536×954 188 KB

  <main>
    <p><iframe *ngIf="pdfLink" [src]="pdfLink" width="100%" height="100%" frameborder="0" ></iframe></p>
  </main>

please tell me anyone how to fix this issue sir ?

Posts: 1

Participants: 1

Read full topic

@a7mdFo2ad wrote:

my app after uploading to the app store to review I got responded with the issue that app stuck on splash screen
I instaled it from testFlight and getting the same issue
the app working fine before I upload it
How to can debug it?

Posts: 1

Participants: 1

Read full topic

@Mike1707 wrote:

Hey Guys,

I have the following use-case:

I use a tab-layout in my ionic 4 app and have a segment-bar to switch between components of one tab, nested into my tab-pages (by importing the components’ modules in my tab-page and using their selector in the html-file). This was for ionic3 perfectly fine.

Unfortunately, when I use this style, my nested components do not have any route. Just my tab-pages have routes defined in the tabs.router.module.ts. Nevertheless, I want to navigateForward from the nested components to other pages which do have routes. And this is for me semantically not correct.

For example:

tab1 route: private/app/tabs/home (defined in tabs.router.module.ts as path of a child)

• segment1 imports achievements.module.ts
• segment2 imports news.module.ts

tab2 route: private/app/tabs/profile (defined in tabs.router.module.ts as path of a child)

• segment1 imports account.module.ts
• segment2 imports friends.module.ts

Now I want to navigateForward from tab2, segment1 to “change account”. At this point, I use the route private/app/tabs/profile/account/change for this. Also, I want to navigateForward from tab2, segment2 to “edit friends” with the route private/app/tabs/profile/friends/edit.

For me, it’s semantically not correct routing because the routes private/app/tabs/profile/account and private/app/tabs/profile/friends don’t exist. If I use private/app/tabs/profile/change and private/app/tabs/profile/edit it wouldn’t be correct as well because the “account” and “friends” part would be missing.

Unfortunately, I don’t know how I can change this to a better solution. Do you have advises?

Thanks in advance
Mike

Posts: 1

Participants: 1

Read full topic

@keloa wrote:

hi
I was trying to add google maps to an app that I was working on and after running these commands :

ionic cordova plugin add cordova-plugin-googlemaps \
  --variable API_KEY_FOR_ANDROID="key" \
  --variable API_KEY_FOR_IOS="key"

npm install @ionic-native/core @ionic-native/google-maps

I get this error:

 Runtime error
    Object(...) is not a function

even though I didn’t use the plugin in my code yet !

here is my package.json :

{
  "name": "cake-driver",
  "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/base64": "^4.20.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/google-maps": "^4.20.0",
    "@ionic-native/image-picker": "^4.20.0",
    "@ionic-native/onesignal": "^4.20.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "^2.2.0",
    "com-badrit-base64": "0.2.0",
    "cordova-android": "7.1.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-googlemaps": "2.5.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-telerik-imagepicker": "2.2.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "3.0.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "onesignal-cordova-plugin": "2.4.6",
    "rxjs": "6.0.0",
    "rxjs-compat": "^6.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "onesignal-cordova-plugin": {},
      "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-telerik-imagepicker": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "yoWe need this permission to get the needed photos"
      },
      "com-badrit-base64": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "AIzaSyCOd-Z643z1lP19CDHw-tr3eBugmpAXz8k",
        "API_KEY_FOR_IOS": "AIzaSyDFr-FqOKG_WDNKYggLeCJw8yPPkHOyR5Q"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

Posts: 1

Participants: 1

Read full topic

@nir-z wrote:

HI,

I am using FileOpener plugin in order to open a based64 file converted to Blob.
The file is being created succesffuly in the download folder, but file opener fails to open it/

Error:

TypeError: Object(…) is not a function

at FileOpener.open (vendor.js:101647)
at 8.js:323
at t.invoke (polyfills.js:3)
at Object.onInvoke (vendor.js:4982)
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:4973)
at t.invokeTask (polyfills.js:3)

MY code:

    let filename = "temp.pdf";
    this.file.writeFile(this.file.externalRootDirectory + '/Download/', filename, this.convertBaseb64ToBlob(data.file, 'application/pdf'), {replace: true})
    .then((fileEntry: FileEntry) => {

      console.log("File created!");
      debugger;
      let test = fileEntry.toURL();
      //Open with File Opener plugin


      this.fileOpener.open(test, 'application/pdf')
        .then(() => {
          console.log('File is opened');
          loading.dismiss();}
          ).
          catch(err =>  {
            debugger;
              console.error('Error openening file: ' + err);
              loading.dismiss();}
            );
    })
    .catch(function(err) {
      debugger;
      console.log(err);
      loading.dismiss();
  });

THanks!

Posts: 1

Participants: 1

Read full topic

@FK2193 wrote:

In ionic how to get data in AlertController so that we can easily edit it rather to make a new page i want to update data through alert controller.

Posts: 1

Participants: 1

Read full topic

@smartmarketiq wrote:

Steps to reproduce:

1. Create Brand New Ionic Project.
2. Upgrade package.json to latest Ionic packages (7.2.2)
3. Run: npm i cordova-ios (5.0.0)
4. Run ionic build (or npm run build or ng build)
5. See error about ionic.core.js.

ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
Module parse failed: Unexpected token (6:2160)

Ionic:

ionic (Ionic CLI) : 4.10.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/build-angular : 0.13.1
@angular-devkit/schematics : 7.3.1
@angular/cli : 7.3.1
@ionic/angular-toolkit : 1.3.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

System:

NodeJS : v10.14.2 (/usr/local/bin/node)
npm : 6.7.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

Posts: 1

Participants: 1

Read full topic

@dawerdrew wrote:

I have a payment button. developed just for the web and I have to adapt it to work in ionic

1. I have a function to send some parameters to the server of my provider of the payment button. and this returns an id = checkoutId. this works well.

2. with the Id checkout I have to load the following script: <script src = “https://test.example.com/v3/file.js?checkoutId={checkoutId}”> </ script>

-I can not place it in index.html because I need to get a dynamic id in home and load the script with that id. Any suggestions or recommendations?

Posts: 1

Participants: 1

Read full topic

@ariff23 wrote:

Reference.child failed: First argument was an invalid path = “undefined”. Paths must be non-empty strings and can’t contain “.”, “#”, “$”, “[”, or “]”

image.png1297×567 36.3 KB

any solution with this code…plis help me

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, LoadingController, ToastController, NavParams } from ‘ionic-angular’;
import { UserserviceProvider } from ‘…/…/providers/userservice/userservice’;
import { HomePage } from ‘…/home/home’;

/**

• Generated class for the RegisterPage page.
• See https://ionicframework.com/docs/components/#navigation for more info on
• Ionic pages and navigation.
  */

@IonicPage()
@Component({
selector: ‘page-register’,
templateUrl: ‘register.html’,
providers: [UserserviceProvider]
})
export class RegisterPage {

public first_name : any;
public last_name : any;
public email : string;
public password : any;
public phone : any;
public state : any;

constructor(public navCtrl: NavController, public navParams: NavParams,
public usersserviceProvider : UserserviceProvider,
public toastCtrl: ToastController, public loadingCtrl: LoadingController) {
//
}

ionViewDidLoad() {
console.log(‘ionViewDidLoad RegisterPage’);
}

doSignup(){

 var account = {
   first_name: this.first_name,
  last_name: this.last_name,
  email: this.email, 
  password: this.password,
  phone: this.phone,
   state: this.state
 

};

var that = this;

var loader = this.loadingCtrl.create({
content: “Please wait…”,

});
loader.present();


this.usersserviceProvider.signupUserService(account).then(authData => {
	//successful
	loader.dismiss();
	that.navCtrl.setRoot(HomePage);

}, error => {

loader.dismiss();
// Unable to log in
let toast = this.toastCtrl.create({
message: error,
duration: 3000,
position: ‘top’
});
toast.present();

  that.password = ""//empty the password field

});

}
}

Posts: 1

Participants: 1

Read full topic

@RomnEmpire wrote:

Hello guys,
I want to convert an pdf file to HTML.actually i have load pdf data in the HTML content section and i used jframe for load pdf in the HTML but problem is that the pdf data are not loaded in the APK but in the localhost pdf is loaded.that’t the i have choose 2nd way firstly we have convert pdf to HTML then display in the HTML.tell m anyone there is any other way in the ionic3 to convert to HTML?

Posts: 1

Participants: 1

Read full topic

@ymongo wrote:

Hi there, I’m new to Ionic and Angular. I’m playing with the sidemenu basic templarte app.

If I add a in the toolbar on top of “List” page, I’d like the animated transition to be a slide to the side back to “Home” instead of the current kind of fade out to “Home”.

How can I change this animation? Thanks for the great work!

Posts: 1

Participants: 1

Read full topic

@fahd123 wrote:

I have Problem in toast.present();

My code Html

type or paste code here
```<ion-content padding>
  <form (ngSubmit)="FormReg()" padding>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="email" [(ngModel)]="todo.email" name="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input [(ngModel)]="todo.pw" name="pw"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Confirm password</ion-label>
      <ion-input [(ngModel)]="todo.confirm_pw" name="confirm_pw"></ion-input>
    </ion-item>
    <ion-button ion-button type="submit" color="primary" expand="full">Sign In</ion-button>
  </form>
</ion-content>

My code ts

```import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http'

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

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

  constructor(
    private http:HttpClient,
    public toastController: ToastController,
    ) 
    { }


  ngOnInit() {
  }

  
  FormReg(){
  
    let toast = this.toastController.create({
      message: 'Toast Message',
      duration: 3000
    });
    toast.present();

  }

}

Posts: 2

Participants: 2

Read full topic

@ollie-w wrote:

Is there any documention about how to import and use a custom web component into Ionic 4?

I made a web component with Stencil and put it on NPM. I have done an NPM install in my Ionic app but can’t figure out how to use it.

Posts: 1

Participants: 1

Read full topic

@bandito wrote:

Cannot use ion-nav.getByIndex() in ionic-angular v4.

constructor(public navCtrl: NavController){}

getByIndex(){
    console.log( this.navCtrl.getByIndex() );
}

I get this message in the Console:

**ERROR in src/app/editevent/editevent.page.ts(316,42): error TS2339: Property 'getByIndex' does not exist on type 'NavController'.**

Can you actually use this in Angular? The docs are not clear at all.

Posts: 1

Participants: 1

Read full topic

@fordyfy wrote:

Good Day! I need your help for my Ionic project. How can I customize the content of the receipt in pos thermal printer via bluetooth? I want to adjust the font size, the font format and make it center and other stuff. I can print text but I don’t know how to format it.

here’s the plugin that is used https://github.com/razmans/ionicBluetoothPrint

testPrint(bluetooth_address)
  {
    let header = "PCG Cellphone Shop \n Plaza Burgos, Guagua, Pampanga \n (Beside Generika) \n \n Smart Padala No. \n 5577-5194-0426-6109 \n 5577-5194-0426-7109 \n 0999-3209009"
    let cashierCustomerInformation = "Cashier: PCG Sakes POS \n POS: SP POS 1 \n \n  Customer: Nora B. Beiza \n 09430359637"
    let topTransactionInformation = "Receive - Smart Padala \t 2,000.00 \n 1 x 2,000.00 \n" 
    let midTransactionInformation = "1 x 2,000.00 \n 20Jan 10:19: Received P2,000.00 with P23.00 commission from 09393965558 to PCG LA.LIBRE ang pag-claim! Ref:174813715fdf Bal:P16,297.84"
    let bottomTransactionInformation = "03. 1,5000.01 to 2,000 \t 0.00 \n Recieve Charge \n 1x0.00"
    let totalInformation = "Total \t 2,000.00 \n Cash 2,000.00"
    let footer = "\tThank you for choosing \t \n \t Smart Padala! \n 1/20/19 5:03 PM \t #1-1620"
    let printData= header +cashierCustomerInformation + topTransactionInformation + midTransactionInformation 
    + bottomTransactionInformation + totalInformation + footer

    let xyz=this.connectBT(bluetooth_address).subscribe(data=>{
      this.btSerial.write(printData).then(dataz=>{
        console.log("WRITE SUCCESS",dataz);

        let mno=this.alertCtrl.create({
          title:"Print SUCCESS!",
          buttons:['Dismiss']
        });
        mno.present();

        xyz.unsubscribe();
      },errx=>{
        console.log("WRITE FAILED",errx);
        let mno=this.alertCtrl.create({
          title:"ERROR "+errx,
          buttons:['Dismiss']
        });
        mno.present();
      });
      },err=>{
        console.log("CONNECTION ERROR",err);
        let mno=this.alertCtrl.create({
          title:"ERROR "+err,
          buttons:['Dismiss']
        });
        mno.present();
      });
  }

Posts: 1

Participants: 1

Read full topic

@aseelali23 wrote:

I have a combobox containing 3 options. Each option contains names of each page. So when I select one of the option and click the next button I need to move to the respective page. How can I do that?
pls help
here is my code:
html:

<ion-header>

    <ion-navbar>
        <ion-title>REGISTRATION</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <h1>Step 1 : Choose the category</h1>
    <ion-item>
        <ion-label>Category</ion-label>
        <ion-select [(ngModel)]="category">
            <ion-option value="i">Individual</ion-option>
            <ion-option value="t">3rd party</ion-option>
            <ion-option value="d">Dedicated</ion-option>
        </ion-select>
    </ion-item>

 
</ion-content>
<ion-footer no-shadow class="foot">
    <ion-toolbar position="bottom">
        <button (click)="rg()" ion-button full color="primary" block>Next</button>
    </ion-toolbar>
</ion-footer>

ts file:

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { ConnectrgPage} from '../connectrg/connectrg';
import { IndividualregPage } from '../individualreg/individualreg';
import { NgModel } from '@angular/forms';
import { NgIf } from '@angular/common';

@Component({
    selector: 'page-connectreg',
    templateUrl: 'connectreg.html',
    providers: [ObsAuthService]
})
export class ConnectregPage {
    

    
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) {}

        selectChange(e) {
            console.log(e);
        }
        
        public rg(){
            
            this.nav.push(IndividualregPage);
        }
    }

Posts: 1

Participants: 1

Read full topic

@rajputsachin wrote:

{ Error: Failed to clean directory F:\projectname\www\build - EPERM: operation not permitted, lstat ‘F:\projectname\www\build\15.js’
at new BuildError (F:\IndiansInCA\node_modules@ionic\app-scripts\dist\util\errors.js:16:28)
at F:\IndiansInCA\node_modules@ionic\app-scripts\dist\clean.js:15:32
at new Promise ()
at Object.clean (F:\IndiansInCA\node_modules@ionic\app-scripts\dist\clean.js:7:12)
at buildProject (F:\IndiansInCA\node_modules@ionic\app-scripts\dist\build.js:99:13)
at F:\IndiansInCA\node_modules@ionic\app-scripts\dist\build.js:89:42
at step (F:\IndiansInCA\node_modules@ionic\app-scripts\dist\build.js:32:23)
at Object.next (F:\IndiansInCA\node_modules@ionic\app-scripts\dist\build.js:13:53)
at fulfilled (F:\IndiansInCA\node_modules@ionic\app-scripts\dist\build.js:4:58)
at hasBeenLogged: false, isFatal: false }

please provide me solution for this thanks.

Posts: 1

Participants: 1

Read full topic

@MaBbKhawaja wrote:

hi I am using ionic 4 and navigating to next pages using angular routing i have a sign in page when i run it in mobile and sign in it displays next page but when i press back button on my mobile it takes me back to log in page I want to disable going back to sign in page and only go back to sign in page when i press logout button which i already have set in my app … can anyone help ?

Posts: 1

Participants: 1

Read full topic