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

How to move a marker smoothly from source to destination in google maps

$
0
0

@Ferozabdul wrote:

I am working on taxi booking app. i want to implement the car moving animation in google map from one place to another. How to do ? can anyone help me…

Posts: 1

Participants: 1

Read full topic


Can't upload image to server using FileTransfer

$
0
0

@OliverPrimo wrote:

Hello Everyone :slight_smile:

I am trying to upload an image from my app to the server but it doesn’t work. It always returns:

{
    "code": 1,
    "http_status": 405, // Method Not Allowed
}

Here is my code:

TS File

    const fileTransfer: FileTransferObject = this.fileTransfer.create();

    let options1: FileUploadOptions = {
        fileKey: 'file',
        fileName: 'name.jpg',
        headers: {
            'Accept' : 'application/json',
            'Authorization' : 'Bearer ' + this.token
        }
    }
    
    fileTransfer.upload(imageData, apiUrl, options1)
    .then((data) => {
        this.loadingSrvc.hide();
        let alert = this.alertCtrl.create({
            message: JSON.stringify(data)
        });
        alert.present();
    }, (err) => {
        this.loadingSrvc.hide();
        let alert = this.alertCtrl.create({
            message: JSON.stringify(err)
        });
        alert.present();
    });

API URL

    public function profilePicture(Request $request)
    {
        if(Input::file('file')){
            $newFileName = 'investor-'.strtolower(Auth::user()->first_name).'-'.date('m-d-Y-H-i-s').'.'.Input::file('file')->extension();
            $newFilePath = public_path('assets/images/investor/profile/');
            
            Input::file('file')->move($newFilePath,$newFileName);
            
            Investor::where('investor_id', Auth::user()->investor_id)->update([
                'profile_image' => 'assets/images/investor/profile/'.$newFileName,
            ]);
            HistoryController::createHistory('fund_investment', Auth::user()->investor_id); 

            return response()->json('success');
        } else {
            return response()->json('error');
        }
    }

Ionic CLI Version: PRO 4.2.1
Cordova Verion: 8.0.0
NPM Version: 6.4.1
Node.js version: 8.11.3
Platform: Android


The weird thing is that the same code with a different API URL works on another function. I really don’t know what is the problem. I hope someone can help me with this. Thank you in advance :blush:

Posts: 1

Participants: 1

Read full topic

Ionic 4 use server-side rendering ?

Pipe could not be found in ionic4

$
0
0

@aligassan wrote:

recently l create my own pipe in ionic4 name is StatusairportPipe . Then l imported it in app module.ts , now when l am trying to use it l got errors:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'my' could not be found ("
            <td text-center>{{item?.flight.aircraft.model.code}}</td>
            <td text-right>{{[ERROR ->]item?.flight.status.generic.status.text | my}}</td>

            </tr>

StatusairportPipe model ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'my'
})
export class StatusairportPipe implements PipeTransform {

  public states: Object = {
    'scheduled':   'مجدولة',

  };
  transform(value: string, ...args) {
    // This is our catch for data that hasn't interpolated
    // from its source yet, a basic async fix.
    if(value == null) return;
// Otherwise, lookup the state name from the acronym
    if(this.states[value]){
      return this.states[value];
    } else {
      return value;
    }
  }

}

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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HTTP } from '@ionic-native/http/ngx';
import { Network } from '@ionic-native/network/ngx';
import { StatusairportPipe } from './statusairport.pipe';

@NgModule({
  declarations:
   [AppComponent, 
    StatusairportPipe

  ],
  entryComponents: [],

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HTTP,
    Network
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Posts: 1

Participants: 1

Read full topic

Ionic 3 : cannot read property 'addEventListener' of null : Google Maps

$
0
0

@naveenvuppu wrote:

iam getting this error some times … please help

code :

google.maps.event.addListenerOnce(this.infoWindow, ‘domready’, () => {
document.getElementById(‘showDirections’).addEventListener(‘click’, () => {
//alert(‘Clicked’);
this.navCtrl.push(DirectionsMapsPage, {
latde: latde,
longtde: longtde
});
});
});

Posts: 1

Participants: 1

Read full topic

Use Ionic File from ios Files app

$
0
0

@Vartone wrote:

Hi,

I try to use Document From FilePicker and display a SVG file in my application.
Currently I can have the file location with this code

this.filePicker.pickFile()
    .then(uri => {
      this.goToWire({"url": uri})
    })
    .catch(err => console.log('Error', err));

But when i try to use it like :
TS File :

this.svg = "file://"+this.params;

HMTL File :

<object type="image/svg+xml" [data]="svg" id="my-embed"></object>

Nothing append. I have an empty place in the application.

I try to use object, embed and iframe in order to display SVG file

I also try this kind of things :

this.file.resolveLocalFilesystemUrl(this.params)
    .then((fileEntry: FileEntry) => {
      console.log(fileEntry);
      this.svg = fileEntry.nativeURL;
      alert(this.svg);
    });

What I want to do ?
I want to display/zoom/edit an SVG file located in folder from apple application (I use an application named “Documents” from apple store to store my file.
Everything works when i use an assets file.
But when I try to use a file picked in Folder, nothing works anymore.

Thank you for answer,

Posts: 1

Participants: 1

Read full topic

Ionic 4 Browser Support

$
0
0

@neilsherman wrote:

The page at: https://ionicframework.com/docs/intro/browser-support suggests that IE 11 is a supported browser for running an Ionic 4 app, however I can not get an Ionic 4 app to run in IE 11.

Steps to reproduce:

ionic start test sidemenu
ionic serve

Opening in IE 11, I see the following error in the console:

Exception thrown and not caught:
_for-of.js

Ionic:

ionic (Ionic CLI) : 4.10.2 (C:\Users\neil\AppData\Roaming\npm\node_modules\ionic)
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.3.0

System:

NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows Server 2016

Can anybody confirm whether IE is actually supported?

Posts: 1

Participants: 1

Read full topic

Reuse tag from ionic

$
0
0

@mdline wrote:

Hello,

I want to write my custom tag based on ion-segment, becaue I will make changes on the component file.

My tag is named ion-custom-segment.

How can I tell in my scss file to take the style from ion-segment or should I have to copy the styles in to my scss file?

Posts: 2

Participants: 2

Read full topic


Working on 2 different computers

$
0
0

@goudden wrote:

Hello, what is the best way to keep the versions of Npm, ionic, cordova, node, node modules, etc, synchronized in the computer of work and home. Beyond the version control of the project, how do I make both computers have the same development environment.

any ideas ?? any advice ?? some tool ??

oswaldo.

Posts: 2

Participants: 2

Read full topic

Ionic v4 lazy loading not working after migrating from v3

$
0
0

@yavorivanov wrote:

I had working lazy loading in v3 and after updating with v4 it stopped working.
What i have is:

Ionic:

   ionic (Ionic CLI)  : 4.10.2
   Ionic Framework    : ionic-angular 3.9.3
   @ionic/app-scripts : 3.2.2

Cordova:

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

System:

   NodeJS : v9.8.0 (/usr/local/bin/node)
   npm    : 5.6.0
   OS     : macOS High Sierra
   Xcode  : Xcode 9.2 Build version 9C40b

with angular/core@5.2.11

i made app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: '../pages/home/home.module#HomePageModule'}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

app.module.ts looks:

import { AppRoutingModule } from '../app/app-routing.module';
...
imports: [
 RouterModule,
  CommonModule,
  AppRoutingModule,
...

home.module.ts is:

import { NgModule } from '@angular/core';
import { HomePage } from './home';
import { TranslateModule } from '@ngx-translate/core';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  { path: '', component: HomePage }
];

@NgModule({
  declarations: [HomePage],
  imports: [
    IonicModule,
    CommonModule,
    RouterModule.forChild(routes),
    TranslateModule.forChild()
  ],
  exports: [RouterModule]
})
export class HomePageModule { }

app.html:

<ion-app>
    <ion-router-outlet></ion-router-outlet> 
</ion-app> 

app.component.ts:

...
@Component( {
    templateUrl: 'app.html'
} )
...
this.router.navigateByUrl('/home');

With this code i am getting :

 Templete parse errors: "ion-router-outlet" is not a known element: 1. If "ion-router-outlet" is an Angular component, then verify that it is part of this module. ...

if i use “router-outlet” (without )i have this error :

Uncaught (in promise). Error: Cannot find module '../pages/home/home.module'. Error: Cannot find module '../pages/home/home.module' at ...

Unfortunately i cant find any proper guide how to migrate the lazy loading

Posts: 1

Participants: 1

Read full topic

Please help Im a beginner. im stuck with a simple form ionic 4

$
0
0

@rajathdevapp wrote:

core.js:15713 ERROR Error: Uncaught (in promise): Error: Template parses errors:
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

my page.html

                      <ion-input type="text" name="reason"></ion-input>
              </ion-item>
                  <ion-button expand="block" shape="round" (click)="apply()">Apply</ion-button>
                    
      </form>

app.module.ts

import { NgModule, enableProdMode } 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 { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { BarcodeScanner } from ‘@ionic-native/barcode-scanner/ngx’;
import { Device } from ‘@ionic-native/device/ngx’;
import { HttpModule } from ‘@angular/http’;
import { HttpClientModule } from ‘@angular/common/http’;
import { Toast } from ‘@ionic-native/toast/ngx’;
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule } from ‘@angular/forms’;

enableProdMode();

@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpModule, HttpClientModule, ReactiveFormsModule],
providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
Device,
Toast,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

tab3.page.ts

import { Component, enableProdMode } from ‘@angular/core’;
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule } from ‘@angular/forms’;

@Component({
selector: ‘app-tab3’,
templateUrl: ‘tab3.page.html’,
styleUrls: [‘tab3.page.scss’]
})

export class Tab3Page {

    loginForm : FormGroup;
    constructor(public formBuilder: FormBuilder){}
    ngOnInit() {
          
          imports: [
            ReactiveFormsModule
          ]
    }

}

Posts: 1

Participants: 1

Read full topic

How can i show Discounted Prices if its available?

Activate virutal keyboard in Ionic 3 UWP

$
0
0

@ezikoh wrote:

Hi.
I have an app in ionic 3, I compile to UWP in windows 10, but the question is.

Is there any way to activate the virtual keyboard of WIndows 10 when accessing a field, when an application of Ionic 3 is executed in UWP? or how activate virutal keyboard automatically when the user fill the input field?

Thank you.

Posts: 1

Participants: 1

Read full topic

Some Modules not found after ionic 3 to ionic 4

Ionic cordova requirements

$
0
0

@blondie63 wrote:

Hi all, my mac configuration:

System:
Android SDK Tools : 26.1.1 (/Users/mauro/Library/Android/sdk/)
ios-sim : 7.0.0
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.7.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

Running cmd: “ionic cordova requirements” i’ve this:

Android Studio project detected

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-28,android-27,android-26
Gradle: installed /usr/local/Cellar/gradle/5.1.1/bin/gradle

Requirements check results for ios:
Apple macOS: installed darwin
Xcode: installed 10.1
ios-deploy: not installed
ios-deploy was not found. Please download, build and install version 1.9.2 or greater from https://github.com/phonegap/ios-deploy into your path, or do ‘npm install -g ios-deploy’
CocoaPods: installed 1.5.3
Some of requirements check failed

Is it normal ?
Thanks for help

Posts: 1

Participants: 1

Read full topic


[Ionic 4] Routing between tab detail pages

$
0
0

@Glaenzesch wrote:

Hello everybody,

i have a question regarding tab navigation in the ionic r4 release and i hope you can help me.
Here is the situation:

I have 3 tabs:

  • Tab1 (List items of type A)
  • Tab2 (List items of type B)
  • Tab3 (List of forwarded items of type A and type B)

Tab1 & Tab2 display a list with items. By clicking on an item in Tab1 you are forwarded to a details page inside Tab1. By clicking on an item on Tab2 you are forwarded to a details page inside Tab2. Each details page has a different view. When you click on an item in Tab 3 you are forwarded to the details page of Tab1 or Tab2, depending on the item type.

To route between the tabs i use this.router.navigate(['./pipeline/tab1/tab1-details', id]);
This working quite good. My goal is the “reuse” the detail pages instead of coding it twice.

But here’s my issue. When i’m in tab1-details and want to route back with this.router.navigate(['./pipeline/tab3]); the forwarded list of my items is displayed. But when i click on the tab1 button below in the ion tab bar the view is still stuck inside the tab1-details page.
How can i show the item list of type A instead of the details?

This is my routing:

const routes: Routes = [
  {
    path: 'pipeline',
    component: PipelinePage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: './tab1/tab1.module#Tab1PageModule'
          },
          {
            path: 'tab1-details/:id/',
            loadChildren: './tab1/tab1-details/tab1-details.module#Tab1DetailsPageModule'
          },
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: './tab2/tab2.module#Tab2PageModule'
          },
          {
            path: 'tab2-details/:id/',
            loadChildren: './tab2/tab2-details/tab2-details.module#Tab2DetailsPageModule'
          },
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: './tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/pipeline/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/pipeline/tab1',
    pathMatch: 'full'
  }
];

Has anyone an idea? Thanks in advance

Posts: 1

Participants: 1

Read full topic

Export apk android (ionic4)

[ioniv 4] ion-menu as menu.componetn problem

Can ionic-native/geolocation asks for google API's or payment after certain amount of time or daily quota is more for calling geolocation methods?

$
0
0

@ashokInceptive wrote:

Can ionic-native/geolocation ask for google API’s or payment after a certain amount of time or daily quota is more for calling geolocation methods?

Posts: 1

Participants: 1

Read full topic

Ionic4 how to navigate inside modal

$
0
0

@askona1 wrote:

I’m opening new modal window, and I want to start new navigation within this window. But, when I’m doing

router.navigate(…) it pushes page, that behind modal window (from which I opened this modal)

Posts: 2

Participants: 2

Read full topic

Viewing all 48979 articles
Browse latest View live


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