Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70435 articles
Browse latest View live

Native Page Transitions Problem ionic 4

$
0
0

@flotilla wrote:

Hey, i have some problem with Native Page Transitions.

here is my code.

home.page.html

<ion-footer>
    <ion-tabs>
        <ion-tab-bar   slot="bottom" >
          <ion-tab-button (click)="slidePage()" href="/profil"  style="margin-bottom:5px" >
            <ion-icon  end style="color: white; font-size: 35px !important"  name="md-person"></ion-icon>
           
          </ion-tab-button>
    
         
          <ion-tab-button>
          </ion-tab-button>

          <ion-tab-button href="/options"   style="margin-bottom:5px">
            <ion-icon   style="color: white; font-size: 35px; "  name="ios-more"></ion-icon>
          </ion-tab-button>      
        </ion-tab-bar>
      </ion-tabs>
    

 <div  class="knfooter">
   
   <a  href="/giris"> <img src="../assets/images/scanning5.png" style="height: 86px; "  ></a>
  
 </div>

</ion-footer>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NativePageTransitions } from '@ionic-native/native-page-transitions/ngx';


//import { GirisPage } from './giris/giris.page';

@NgModule({
  declarations: [
    AppComponent,
  //GirisPage,
  
    ],

  entryComponents: [
  
   
  ],

  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    
   ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    NativePageTransitions,
    
  ],
  bootstrap: [AppComponent,]
})
export class AppModule {}
  

and

home.page.ts

import { Component } from '@angular/core';

import { Router } from '@angular/router';

import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions/ngx';







@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  
constructor(private router: Router, private nativePageTransitions: NativePageTransitions  ) {}

slidePage(){
  let options: NativeTransitionOptions = {
    direction: 'left',
    duration: 400,
    slowdownfactor: -1,
    iosdelay:50

  }
  this.nativePageTransitions.slide(options);
  this.router.navigateByUrl("/profil");
} 

}

 

no error but not working.

Posts: 1

Participants: 1

Read full topic


I cant run my project in android studio or on a device

$
0
0

@flotilla wrote:

Hi, i want to open my project in a android emulator or device. but when i write " ionic cordova run android" i take this error:

What went wrong:

A problem occurred evaluating project ‘:CordovaLib’.

> No installed build tools found. Install the Android build tools version 19.1.0 or higher.

*** Try:**

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

*** Get more help at https://help.gradle.org**

BUILD FAILED in 0s

/Users/bugra/Desktop/ionic denemeler/sayfa/platforms/android/gradlew: Command failed with exit code 1 Error output:

FAILURE: Build failed with an exception.

How can i solve the problem? thx.

Posts: 1

Participants: 1

Read full topic

Window["plugins"] is null! so I can't start onesignal

$
0
0

@pdj wrote:

Hello :slight_smile:

I start my app with onesignal .

but sometimes window[“plugins”] value is undefined so it goes to error screen…
how can I prevent from getting window[“plugins”] is undefined?

  window["plugins"].OneSignal
        .startInit("xxxx", "xxxxx")
        .handleNotificationOpened(function(jsonData) {
          console.log(jsonData.notification.payload.additionalData.datas)
        })
        .endInit();

Posts: 2

Participants: 2

Read full topic

Getting image gps details using cordova-plugin-camera-with-exif

$
0
0

@Saravanantg wrote:

Using cordova-plugin-camera-with-exif to get image gps details.
But, always getting below error
“{ “error”: “Unable to read exif data from remote URI” }”

Code:

this.camera.getPicture(options).then((imageData) => {
const cameraDetail = JSON.parse(imageData);
const exifData = JSON.parse(cameraDetail.json_metadata);
const output: Output = {
base64: data:image/jpeg;base64,${cameraDetail.filename},
exifDetail: exifData
};

this.mypic.unshift(output); 


}, (err) => {
  console.log('error : EXIF',err);
});

Any help,
Thanks in advance

Posts: 1

Participants: 1

Read full topic

Ionic-v4 grid layout

$
0
0

@Nicolus wrote:

How can we use grid alignment with ionic v4 ?

I did not succeed in using attributes like align-items-center, align-self-center… on rows and cols.

I made my own CSS to center horizontaly and verticaly an ion-label but I’m sure there is a better way :

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-label>
          label
        </ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
ion-grid {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

With previous versions, to my mind, component page of ionic web page showed live demo of widgets with associated code. It was usefull…

Thanks :blush:

Posts: 1

Participants: 1

Read full topic

How to set image in page backgrounf in ionic 4?

$
0
0

@gokujy wrote:

Hello, I want set background image in my page, anyone know how to do?
Please help if possible…!

Posts: 1

Participants: 1

Read full topic

Google Roboto regular and Roboto medium fonts import in ionic3

$
0
0

@Praveensb wrote:

Hi coders,
I am new to ionic.
Please help me to solve the below problem.

How to import and apply Google Roboto regular and Roboto medium fonts to ionic 3?

Posts: 1

Participants: 1

Read full topic

Convert Ionic app to Angular app

$
0
0

@brianmackey wrote:

Ionic CLI 4.10.3.

We have 1 Ionic app. We need to break it into 3 apps. 2 Angular and 1 Ionic.

I read that Ionic does not directly support deployments as a website. I’m tasked with converting an Ionic app to an Angular app. Is this supported?

If no, my idea is to use Angular Material to get a similar look and feel. Has anyone done this? Any suggestions or recommendations?

Posts: 1

Participants: 1

Read full topic


Compiling problems with --prod

$
0
0

@Kyrax80 wrote:

Hello, if I compile my App with ionic cordova build android --prod I get an error in my console log saying the following:

Unhandled Promise rejection: StaticInjectorError(n)[t -> e]: 
  StaticInjectorError(Platform: core)[t -> e]: 
    NullInjectorError: No provider for e! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError(n)[t -> e]: 
  StaticInjectorError(Platform: core)[t -> e]: 
    NullInjectorError: No provider for e!
    at t.get (vendor.js:1)
    at vendor.js:1
    at _ (vendor.js:1)
    at t.get (vendor.js:1)
    at vendor.js:1
    at _ (vendor.js:1)
    at t.get (vendor.js:1)
    at re (vendor.js:1)
    at t.get (vendor.js:1)
    at Te (vendor.js:1) Error: StaticInjectorError(n)[t -> e]: 
  StaticInjectorError(Platform: core)[t -> e]: 
    NullInjectorError: No provider for e!
    at t.get (file:///android_asset/www/build/vendor.js:1:58192)
    at file:///android_asset/www/build/vendor.js:1:10256
    at _ (file:///android_asset/www/build/vendor.js:1:10280)
    at t.get (file:///android_asset/www/build/vendor.js:1:58973)
    at file:///android_asset/www/build/vendor.js:1:10256
    at _ (file:///android_asset/www/build/vendor.js:1:10280)
    at t.get (file:///android_asset/www/build/vendor.js:1:58973)
    at re (file:///android_asset/www/build/vendor.js:1:25967)
    at t.get (file:///android_asset/www/build/vendor.js:1:108151)
    at Te (file:///android_asset/www/build/vendor.js:1:31315)

I’ve never needed to import Platform from ionic-angular to providers and this isn’t happening if I compile with --prod

My Ionic info is:

cli packages: (C:\...\node_modules)

    @ionic/cli-utils  : 1.19.3
    ionic (Ionic CLI) : 3.20.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.11.1
    npm               : 6.8.0
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\...\AppData\Local\Android\Sdk

Misc:

    backend : pro

What can be causing this?

Thanks

Posts: 1

Participants: 1

Read full topic

Ionic 4 ionic lab proxy not working

$
0
0

@ian4bis wrote:

I am upgrading a project from ionic 3 to ionic 4 and I am running into an issue with proxies in ionic lab. I have followed the guides to configure proxies for angular 7 and am able to get the proxied working with ionic serve and ng serve. But when I use ionic serve --lab, the lab environment is still submitting all api calls to localhost. Has anyone experienced this problem, or have any ideas on what could be wrong?

ionic info:

Ionic:

ionic (Ionic CLI) : 4.10.3
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.4.0

angular.json:

“serve”: {
“builder”: “@angular-devkit/build-angular:dev-server”,
“options”: {
“browserTarget”: “app:build”,
“proxyConfig”: “proxy.conf.js”
},
“configurations”: {
“production”: {
“browserTarget”: “app:build:production”
},
“ci”: {
“progress”: false
}
}
}

proxy.conf.js:

const PROXY_CONFIG = [
{
context: [
“/api1”,
“/api2”,
“/api3”,
“/api4”,
“/api5”
],
target: “https://www.myURL.com”,
secure: true,
changeOrigin: true
}
]

module.exports = PROXY_CONFIG;

Posts: 1

Participants: 1

Read full topic

Cordova-plugin-media iOS no stop recording

$
0
0

@Beanster199 wrote:

Well, i have an issue on recording media audio on iOS. i can start recording but when i call stopRecord function it doesn’t stop. It creates my a file in the specified path of 0 kb.
In Android it works perfectly. Please help.

plguins:

<plugin name="cordova-plugin-media" spec="5.0.2" />
<plugin name="cordova-plugin-file" spec="6.0.1" />

Code

  constructor(private media: Media, public plt: Platform, private file: File, public alrtCtrl: AlertController) { }

  startRecord(){
    this.fileName = 'record'+ new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.mp3';
      if(this.plt.is('ios')){
        this.file.createFile(this.file.tempDirectory, this.fileName,true).then(() => {
          this.filePath = this.file.tempDirectory;
          this.audio = this.media.create(this.filePath.replace(/^file:\/\//, '') + this.fileName);
          this.audio.startRecord();
        })
    }else if (this.plt.is('android')){
        this.audio = this.media.create(this.file.externalDataDirectory + this.fileName);
        this.filePath = this.file.externalDataDirectory
        this.audio.startRecord();
      }    
  }
  stopRecord(){
    this.audio.stopRecord();
    this.file.readAsDataURL(this.filePath,this.fileName).then((base64Audio) => {
      this.base64 = base64Audio // **it only returns data:audio/mpeg;base64,**
    })
  }
}

Posts: 1

Participants: 1

Read full topic

Logout facebook ionic 4

$
0
0

@Ludolefrenchy wrote:

Hello,
I have a little worry.
I followed this tutorial and my problem is that FB does not want to disconnect.
I get that in the console “FB.logout() called without an access token”

  logout() {
      this.fb.logout().then(res => {
      this.nativeStorage.remove('facebook_user');
      this.router.navigate(["/"]);
    }, err => {
      console.log(err);
    });
  }

I searched but I do not find how to disconnect if the user wishes.

thank you in advance

Ludo

Posts: 2

Participants: 2

Read full topic

Ionic 4 - popover component and lazy load

$
0
0

@badpenguin wrote:

  • usually i don’t need to declare other modules in app.module because those are lazy loaded by the router
  • however i’ve created a shared service provider that wrap popover.create to quickly create one
  • for some reason if i launch popoverController.create() from within this service it will not see my popover child component - it works of course if i run the code from within the page
  • i also tried passing a string instead of the object but its the same

Is there a way to force my popover component to be resolved before invoking the function in the service?

Posts: 1

Participants: 1

Read full topic

IonShop 2 - Ionic 4 Starter + Admin Portal for e-commerce based apps

Translucent Tabs Ionic 4

$
0
0

@iaguilera14 wrote:

Has anyone been able to get the tab bar translucent on ionic 4? The following doesn’t seem to work. I have the header working as translucent. I have also set ion-content to fullscreen.

<ion-tab-bar slot="bottom" translucent="true">
  
</ion-tab-bar>

Posts: 1

Participants: 1

Read full topic


IOS Smart Punctuation (curly quotes)

$
0
0

@bitflinger wrote:

When using the ion-searchbar & searching for items containing an apostrophe, it returns no data when “smart punctuation” (ios 11 & above) is turned on. Is there a solution to this other than doing a string.replace() to replace curly quotes with straight quotes or telling the user to disable it in the ios general->keyboard->settings?

It would be nice if we had a variable to set for the app where we could enable/disable smart punctuation. Does anything like this exist?

Thanks,
Charlie

Posts: 1

Participants: 1

Read full topic

Origin is ionic:// not http://

$
0
0

@MSC29 wrote:

Hi,

anybody know why on my requests the Origin is ionic:// not http://?

I think that’s the reason why my firebase authentication requests fail…

Request
Connection: Upgrade
Host: xxxxxxx.firebaseio.com
Origin: ionic://localhost
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: xx
Sec-WebSocket-Version: xx
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 Google

Here’s my config

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 3.1.3, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 14 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v11.8.0 (/usr/local/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 9.0 Build version 9A235

plugins

cordova-plugin-add-swift-support 1.7.2 "AddSwiftSupport"
cordova-plugin-app-event 1.2.1 "Application Events"
cordova-plugin-badge 0.8.8 "Badge"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-customurlscheme 4.3.0 "Custom URL scheme"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic 3.1.3 "IonicCordova"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 3.1.2 "cordova-plugin-ionic-webview"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 3.1.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova-universal-links-plugin 1.2.1 "Universal Links Plugin"

Thanks!

Posts: 1

Participants: 1

Read full topic

How can insert the data manually to the firebase?

$
0
0

@NoorAlhuda1990 wrote:

Hi friends , how can i insert some data to firebase manually ??? i mean i insert it to database and then i import it to my ionic 4 app

Posts: 1

Participants: 1

Read full topic

Downloading files in iOS

$
0
0

@aishukhanna wrote:

Hello,

I am trying to download an image in my app using native plugin File in iOS. , this is the code I am using for iOS version:

Typescript file:

let folderpath = null;
if (this.platform.is('ios')) {
            folderpath = this.file.dataDirectory;
        } else {
            folderpath = this.file.externalRootDirectory;
        }

        let filename = 'temp-image.png';
        
this.file.resolveLocalFilesystemUrl(folderpath).then((res) => {
            
            this.file.writeFile(folderpath, filename, DataBlob, {replace: true}).then((success) => {
                this.alertService.showPopup('Card successfully saved to image library', 'Save card success');
            }).catch((err) => {  
                this.alertService.showPopup('Unable to save file', 'Save card error');
            });
        }).catch((error) => {
            this.alertService.showPopup('Unable to save file', 'Save card error');
        })

In Config xml:

<preference name="iosPersistentFileLocation" value="Library">

File is successfully getting stored and I get the alert providing the message in the code. But I am unable to find this file anywhere in my device. Also, I can make the app access the file it stores(like read and output the file as a base64 encoded data url with readAsDataUrl).

Is there any approach to download the files in iOS? I appreciate your time on this.

Thanks

Posts: 1

Participants: 1

Read full topic

Ionic 4 - IonicNativePlugin wrapper for custom plugins Error: Object(...) is not a function

$
0
0

@AsPolar wrote:

I built a plugin then i create his wrapper for work with typescript, this code works on ionic 3 but i have this error on ionic 4

this is my ionic native wrapper for my custom plugin

  1. file-path: src/@ionic-native/plugins/signal-strenght/index.ts
import { Injectable } from '@angular/core';
import { Cordova, IonicNativePlugin, Plugin } from '@ionic-native/core';

@Plugin({
    pluginName: 'SignalStrength',
    plugin: 'cordova-aspolar-plugin-signal-strength',
    pluginRef: 'window.plugins.signalStrength',
    repo: 'https://github.com/JVasconsueloM/aspolar-signal-strength',
    platforms: ['Android']
})
@Injectable()
export class SignalStrength extends IonicNativePlugin {

    @Cordova()
    getdBm(): Promise<any> { return; }

    @Cordova()
    getPercentage(): Promise<any> { return; }

    @Cordova()
    getLevel(): Promise<any> { return; }
}

  1. on app.module.ts
    Screenshot_3

  2. I get this error

Posts: 1

Participants: 1

Read full topic

Viewing all 70435 articles
Browse latest View live