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

ionic 4 callback function between page

$
0
0

@sarunionic wrote:

onic 4 callback function between page ?

in ionic 3

myCallbackFunction = (_params) => {
return new Promise((resolve, reject) => {
this.test = _params;
resolve();
});
}

// push page…
functionToBeClicked() {
this.navController.push(OtherPageComponent, {
callback: this.myCallbackFunction;
});
}
// and in the other page (in this example would be “OtherPageComponent”)

ionViewWillEnter() {
this.callback = this.navParams.get(“callback”)
}

ionViewWillLeave() {
this.callback(param).then(()=>{
this.navController.pop();
});
}

** Would like to know how in ionic 4 Can’t use the navController **

Posts: 1

Participants: 1

Read full topic


Could not resolve org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.3.11

$
0
0

@deizadave wrote:

Hello.
I had to set up a new drive for development and moved my projects. After successful setup, my project compiles successfully but doesn’t build. Here’s the error I get:

gradle2

I’ve check my build.gradle files in platforms/android/build.gradle and platforms/android/ app /build.gradle. Here’s what they look like after making some adjustments (changing maven to mavenCentral()) and I still have the error:

gradle1

I’ll appreciate assistance on this.

Posts: 1

Participants: 1

Read full topic

[ERROR] An error occurred while running subprocess npm.

$
0
0

@daple wrote:

hi, i have a big problem with ionic. I cannot create a new project. when I type:
ionic start myApp tabs, I have this answer:
C:\Users\USER\Desktop\application>ionic start myApp tabs

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
–type option.

? Framework: Angular
? .\myApp exists. Overwrite? Yes
√ Preparing directory .\myApp - done!
√ Downloading and extracting tabs starter - done!

Installing dependencies may take several minutes.

──────────────────────────────────────────────────────────────

    Ionic Appflow, the mobile DevOps solution by Ionic

       Continuously build, deploy, and ship apps
    Focus on building apps while we automate the rest

    Learn more: https://ion.link/appflow

──────────────────────────────────────────────────────────────

npm.cmd i
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm ERR! Unexpected end of JSON input while parsing near ‘…9f6N3c/9VT8p7bmtZoJst’

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Roaming\npm-cache_logs\2020-01-30T19_06_55_632Z-debug.log
[ERROR] An error occurred while running subprocess npm.

    npm.cmd i exited with exit code 1.

    Re-running this command with the --verbose flag may provide more information.

Posts: 1

Participants: 1

Read full topic

Ionic header bar with title image - image scaling

$
0
0

@stealth71 wrote:

Ionic v4 and Angular 8 with Capacitor. I have a header bar with a title image that is working. Problem is I cannot get the image to scale to the header height automatically. Any help?

<ion-header>
  <ion-toolbar color="primary" mode="ios">
    <ion-title>
        <img src="../assets/icon/logo-header_sm.png" class="ion-header">
    </ion-title>
  </ion-toolbar>
</ion-header>
.ion-header{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: auto;
}

Posts: 1

Participants: 1

Read full topic

How to use Ionic Storage to display my page only once for first time users

$
0
0

@YXUN wrote:

Hi all,

I am currently seeking for help on how to use ionic storage to display my page only once for my first time users. I am familiar with using local storage :

    ngOnInit() {

    const checkView = localStorage.getItem('pageDisplayed');
    if (checkView) {
        // here redirect
    }
    localStorage.setItem('pageDisplayed', 'ok');

}

but I was told its not reliable. Hence, anybody can guide me on using ionic storage? Sample code will be helpful.

Thank you. Appreciate any help.

Posts: 1

Participants: 1

Read full topic

Create single connection for entire application

$
0
0

@Harikag wrote:

Hi, I have two screens, First screen display Chats related to users, Second screen displays chat history of a particular person, So am using socket communication for fetching data. So I have created socket connection in the first component, am unable to use same socket in second component, how to solve please help me.

Posts: 3

Participants: 2

Read full topic

Screenshot disable for Ionic Inappbrowser

$
0
0

@deepti001 wrote:

I want to disable the screenshot in the ionic app which uses native inappBrowser.
I read the ionic documentation.
The thing which I understand is, In latest version of ionic, the screenshot is disabled by default. And we can take a screenshot by https://ionicframework.com/docs/native/screenshot

But I want to disable the screenshot from the app (ionic inaApBrowser).

@ionic-native/in-app-browser”: “^5.20.0”,

Posts: 1

Participants: 1

Read full topic

Trying to generate and run apk

$
0
0

@adam2020 wrote:

hello all: am trying to run my ionic app, to get apk file but i face this error:
[08:57:13] tslint: …Users/IBM/Documents/ionicproj/refresh/src/pages/product-detail/product-detail.ts, line: 15
All imports on this line are unused.

  L14:  import { TranslateService } from '@ngx-translate/core';
  L15:  import { CartPage } from '../cart/cart';
  L16:  import { ReviewsPage } from '../reviews/reviews';

[08:57:13] lint finished in 10.02 s
cordova.cmd build android --release
Android Studio project detected
ANDROID_HOME=C:\Users\IBM\AppData\Local\Android\Sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_211
studio
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
[ERROR] An error occurred while running subprocess cordova.

    cordova.cmd build android --release exited with exit code 1.

    Re-running this command with the --verbose flag may provide more information.

Posts: 2

Participants: 2

Read full topic


Send data from one component to other

$
0
0

@Harikag wrote:

Hi all, I have chatHome.html and chatHome.ts, to display user-related ChatData

below is my chatHome.ts code, at first it call showResult() to fetch chat Home data.

showResult(event) {
    if(this.loader!=null){
      this.loader.present();
    }
    
   this.makeSocketConnection();
    
    this.connection = this.chatService.getMessages(this.user, this.pageno,this.socket).subscribe(message => {
     // this.socket.disconnect();
});


makeSocketConnection() {
    var url = "http://" + this.ip + ":" + this.port + "/";
   
    if(this.socket===undefined||!this.socket.connected){
    
      this.socket = io(url);
      this.socket.emit('add user', this.user);    
      this.storage.set('socket',this.socket) ;
//  this.chatService.setSocket(this.socket);
    }  
  }

chatHome.html is below code

<ion-content  style="position: relative;overflow: auto; height: 100%; " class="has-footer"  > 

            <div [formGroup]="myGroup" >
                <ion-row >               
                   <ion-searchbar *ngIf="showSearchBar"  formControlName="searchMsg" [(ngModel)]="searchWord"  (search)="onSearchMsg()"  name="searchMsg" style="border: 1px solid #eee;">             
                  </ion-searchbar>            
                
              </ion-row>
            </div>
            
            <div *ngIf="searching" class="spinner-container">  <ion-spinner></ion-spinner>
            </div>

            <ion-list *ngFor="let mes of splitData let i = index"
             style="padding-left: 1px;padding-right: 10px;margin: 0;">


             <div class=""             
            (click)="chatByRefId(mes.title,mes.msgFrom,mes.msgTo,mes.room,mes.refId,mes.parentRefId,mes.tetraId)" >
                
                <ion-card-content style="border-radius:5px;margin-left: 5px;">
                    <!-- <div><span style="color:#000;" class="fn-sz-sth"><b>{{getUserName(mes.msgFrom)}}</b></span></div>  -->
                    <ion-row align-items-center style="margin-left: -7px;margin-bottom: -13px;">
                        <ion-col  size-sm style="padding:0px;padding-left: 6px;width:60% !important">
                            <p class="ellipsis fn-sz-sth" style="color:#555;line-height: 15px;">
                               <b> {{getUserName(mes.msgFrom)}}</b>
                            </p>                       
                    </ion-col>
                        <ion-col  size="3" size-lg offset="3" style="padding:0px;padding-left: 6px;">
                              <p class="category-description" style="color:#555;font-size: 1rem !important;text-align: right;margin-top: 5px;" >
                                {{mes.createdOn| date :'medium'}} </p>
                            </ion-col>    
                      </ion-row>
                    <span style="color:#555;font-size: 1em;line-height: 15px;" class="fn-sz-sth"><b>{{mes.title}}</b></span> 
                        <div [innerHTML]="mes.msg" class="category-description fn-sz-sth" 
                        style="color:#555;margin-bottom: 0px;font-size: 0.8em;"></div>                   
                    <!-- <span class="category-description" style="color:#000;font-size: 1.1rem;margin-left: 60%;margin-top: 5px;">
                        {{mes.createdOn| date :'medium'}}
                    </span> -->
                    

                </ion-card-content>
            </div>

                        </ion-list>

           <div *ngIf="!hasMoreData" style="text-align: center;margin-top: 10px;"><b></b>{{datLoadStatus}}</div> 

            <ion-infinite-scroll (ionInfinite)="loadData($event)"  style="height:0;min-height: 0;" position="bottom">
              <ion-infinite-scroll-content ></ion-infinite-scroll-content>
            </ion-infinite-scroll>
            <ion-infinite-scroll (ionInfinite)="calledTop($event)" style="height:0;min-height: 0;" position="top">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
              </ion-infinite-scroll>
           </ion-content>

So from above code on clicking chatHome item, am navigating to chatHistory page by callingchatHistoryOnId(), here am unable to use same existed socket in chatHistory component so please help me. how to approach.
I have chatHistoryCompo.ts
below is my code.

// get the datachat history based on Id
  public chatHistoryOnId(pNo,socket): any {
    //   this.loader.present();
    //this.socket = this.chatService.getSocket();
    this.socket = socket;
    var id = this.loginService.getRefId();    
    //this.makeSocketConnection();
    this.socket.emit('chatsByRefId', { refId: id,page_no:pNo });
    let observable = new Observable(observer => {     
      this.socket.on('chatsByRefId', (data) => {
        observer.next(data);
        //this.socket.disconnect();
       // this.makeSocketConnection();
     //   console.log("chatsByRefId " + JSON.stringify(data) + " ");
      });     
      return observable;       
    })    
    return observable;    
  }

Posts: 1

Participants: 1

Read full topic

Can we use ion-buttons in ion-grid?

$
0
0

@ChaminT wrote:

I have try to use ion-buttons inside of ion-grid it’s not positioned correctly,are there any alternatives?

Posts: 1

Participants: 1

Read full topic

Unable to upload large PDF files using file transfer plugin in ionic 4

$
0
0

@deepanshu0622 wrote:

I am getting timeout error while uploading large PDF files with help of Cordova File Transfer plugin in IOS but in Android it’s working fine.

I am getting error as below:
FileTransferError {
body = “”;
code = 3;
“http_status” = 0;
source = “/private/var/mobile/Containers/Data/Application/A2168459-B3ED-4329-BDFE-F2B68E00B937/tmp/com.vghybrid.snfreferral-Inbox/Scan_Test_-_39_pages_test-1-1.pdf”;
target = “https://snfscan.com/customapi/api.php”;
}

I have tried adding ‘Connection: “close”’ to header & ‘chunkedMode: false’ but nothing worked.

Can anyone help me to get out of this issue I am struggling with this from last few days.

Posts: 1

Participants: 1

Read full topic

Ion-icon doesn't work with an array of icons names

$
0
0

@sebastienglanum wrote:

Hello!,

I’m having an issue with ion-icon,

I’ve a list of icons names I get from a GraphQL query in my TypeScript component and I want to use them to show into my html component ion-icon which is inside of ion-list.

The issue here is that my ion-icons are not rendering at all. When I’m putting an ion-label next to the ion-icon it gives me the names of icons I want to use.

Any ideas how to make it work ?

Thanks everyone!

Posts: 2

Participants: 2

Read full topic

How to change Push notification sound

$
0
0

@KemBachhav wrote:

Can anyone tell me how to use custom sound to push notification (Not local notification), currently i am using default sound for receiving notification but i want to change default sound to my other sound file.
thanks

this.http.post(‘https://fcm.googleapis.com/fcm/send’,
JSON.stringify({
notification: {
title: “Hello”,
body: " needs your help!",
sound: “default”, //want to change default to custom sound
click_action: “FCM_PLUGIN_ACTIVITY”
},

Posts: 1

Participants: 1

Read full topic

Why the size of a Ionic App for iOS is much bigger than the Android one?

$
0
0

@ioclaudio wrote:

Hi,
I have an Ionic4 App which contains some gifs, a pair of small gif animation and many Cordova plugins.
Now, the same app, on the Android store is 30MB, while on the Apple store is almost 300MB.
How is it possible?
I use this command to build the app on iOS:
ionic cordova build ios --prod --release

and this command on Android:
ionic cordova build --prod --release android

Is this normal?
Is there a way to optimize the iOS version?

Thank you very much

Claudio

Posts: 1

Participants: 1

Read full topic

Problems using Ionic on my PC - cannot serve a blank project

$
0
0

@Mothbeard wrote:

hello, The disk on my computer was recently corrupted. I had to get it replaced. After replacing I have been having some serious problems reinstalling ionic.

after reinstalling node.js - 13.7.0

then in cmd after running npm install -g ionic

I get the following warning but seems to install ok.

 npm WARN deprecated superagent@4.1.0: Please note that v5.0.1+ of superagent removes User-Agent 
 header by default, therefore you may need to add it yourself (e.g. GitHub blocks requests without a User- 
 Agent header).  This notice will go away with v5.0.2+ once it is released.
 C:\Users\stephen\ionic -> C:\Users\stephen\node_modules\ionic\bin\ionic
 + ionic@5.4.15
 added 247 packages from 154 contributors in 18.455s

I checked the version
ionic version
returned 5.4.15

But after running ionic start and run a blank project I get the following error.

 npm WARN karma-jasmine-html-reporter@1.5.1 requires a peer of jasmine-core@>=3.5 but none is 
 installed. You must install peer dependencies yourself.
 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\webpack- 
 dev-server\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: 
 Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: 
 {"os":"win32","arch":"x64"})
 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 
 (node_modules\watchpack\node_modules\fsevents):
 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: 
 wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 
 (node_modules\karma\node_modules\fsevents):
 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: 
 wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 
  (node_modules\@angular\compiler-cli\node_modules\fsevents):
 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: 
  wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: 
  wanted 
  {  "os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 npm ERR! code EEXIST
 npm ERR! path C:\Users\stephen\test3\node_modules\browserslist\cli.js
 npm ERR! dest C:\Users\stephen\test3\browserslist
 npm ERR! EEXIST: file already exists, cmd shim 'C:\Users\stephen\test3\node_modules\browserslist\cli.js' 
 -> 
 'C:\Users\stephen\test3\browserslist'
 npm ERR! File exists: C:\Users\stephen\test3\browserslist
 npm ERR! Remove the existing file and try again, or run npm
 npm ERR! with --force to overwrite files recklessly.


 npm ERR! A complete log of this run can be found in:
 npm ERR!     C:\Users\stephen\AppData\Roaming\npm-cache\_logs\2020-01-31T11_10_22_715Z- 
 debug.log
 [ERROR] An error occurred while running subprocess npm.

It does create the blank project, but I attempt to serve it I get the following error:

 ionic : The term 'ionic' is not recognized as the name of a cmdlet, function, script file, or operable program. 
 Check the spelling of the name, or if a 
 path was included, verify that the path is correct and try again.
 At line:1 char:1
 + ionic serve
 + ~~~~~
     + CategoryInfo          : ObjectNotFound: (ionic:String) [], CommandNotFoundException
     + FullyQualifiedErrorId : CommandNotFoundException

The only possible error I can think of is my old user drive is stored on my desktop and duplicate file paths may exist (obviously not perfect duplicates but folder names etc)

Posts: 2

Participants: 1

Read full topic


Install production version of ionic 4 - I do not want ionic 5

$
0
0

@Mothbeard wrote:

I see they have updated to ionic 5. I want to use ionic 4 how can I install this on my new PC.

 npm install -g ionic

installs version 5

Posts: 1

Participants: 1

Read full topic

Can I tweak the "watch" glob for running with live reload?

$
0
0

@ZaLiTHkA wrote:

I’ve got an Ionic 4 / Angular 8 project in which I’m moving business logic from the app into a library. Ultimately, the library will be moved to it’s own workspace, but in the meantime I’ve got them both inside the same workspace.

This means my workspace for this project contains (amongst other things):

  • projects/lib/ with my library source code
  • dist/lib/ with the compiled library output
  • src/ with my app source code

While working on this, I’ve been running two terminal commands:

  1. ng build lib --watch
  2. ionic cordova run <platform> --device --livereload

The first command work exactly as expected, but the second seems to be watching everything in my workspace folder… So, the app running on my device reloads when I make changes to my library code, without waiting for the library to finish building.

I’m just curious, has anybody else set up an Angular workspace with Ionic project like this? Is there perhaps a better way to “dev” it?


Note: I did consider moving the application project into it’s own projects/app/ folder, however I’m (a) not sure if that would actually help in this case with using Ionic to run it, and (b) having the library project in this workspace is just temporary, it will be removed as soon as I done with the refactoring.

Posts: 1

Participants: 1

Read full topic

Firebase.h not found

$
0
0

@brambati wrote:

Hello everyone, I hope you are well!

I’m building an ionic APP using the FCM plugin on IOS, but when I send it to xcode I get the message Firebase.h not found in FCMPlugin.m, I checked on the internet that I have to install the dependencies via pod but when performing the installations the error still continues, does anyone know how to solve this.

I thank you for your attention

Posts: 1

Participants: 1

Read full topic

Ionic 3 Download Plugin How to Hide Source URI

$
0
0

@Vinz01 wrote:

I am using Download plugin on ionic 3 to natively download pdf file from an external source. Here is the code I am using.

var request = {
      uri: item.url,
      title: item.resource_title,
      description: '',
      mimeType: '',
      visibleInDownloadsUi: false,
      notificationVisibility: 1,
      destinationInExternalFilesDir: {
          dirType: 'Downloads',
          subPath: 'MyFile.pdf'
      },
      destinationUri: 'this.file.externalRootDirectory + ‘/Download/’',
  };


this.downloader.download(request)
          .then((location: string) => console.log('File downloaded at:'+location))
          .catch((error: any) => console.error(error));

In the above code “item.uri” is an external download link like onedrive.com/demo.pdf

Now the problem is that whenever a user downloads this file, he can see the source url (onedrive.com/demo.pdf) in the download manager.

I was thinking is there a way we can hide this source uri or show some dummy text in the download manager. I can see that other apps like google and skype do that.

Posts: 1

Participants: 1

Read full topic

Ionic 5 - mobile address bar hiding

$
0
0

@shepard wrote:

With Ionic 5, is there now a way to hide a mobile web address bar?
Either automatically when scrolling or forced?

Posts: 1

Participants: 1

Read full topic

Viewing all 49293 articles
Browse latest View live


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