I am currently building an app which will track user in real time and add polyline on google maps. I am not to able figure out how to add polyline dynamically?
↧
How to add live polyline in ionic native google maps?
↧
Cannot use namespace 'WooCommerceProvider' as a type
I’m trying to use the WooCommerce API to retrieve a list of products for my Ionic APP, and I’ve created a provider for that purpose, which contains the following code:
import { Injectable } from '@angular/core';
import * as WC from 'woocommerce-api';
@Injectable()
export class WooCommerceProvider {
Woocommerce: any;
WoocommerceV2 : any;
constructor() {
this.Woocommerce = WC({
url: 'https://colorvet.ro/wp-json/wc/v1/products',
consumerKey: 'xxxxxxxxxxxxxxxx',
consumerSecret: 'xxxxxxxxxxxxx',
wpAPI: true, // Enable the WP REST API integration
queryStringAuth: true,
verifySsl: true,
version: 'wc/v2' // WooCommerce WP REST API version
});
}
init(){
return new Promise((resolve, reject) => {
this.Woocommerce;
});
}
}
I’ve replaced the consumer key and secret with my own. The following is the page where I try to receive the list of products:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import * as WC from 'woocommerce-api';
import { WooCommerceProvider } from '../providers/woo-commerce/woo-commerce';
/**
* Generated class for the ShopPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-shop',
templateUrl: 'shop.html',
})
export class ShopPage {
produse: any[];
WooCommerce: any;
constructor(public navCtrl: NavController, public navParams: NavParams,
private alertCtrl: AlertController,private wooProvider: WooCommerceProvider ) {
this.WooCommerce = wooProvider.WooCommerce;
this.WooCommerce.getAsync("products").then((searchData) => {
this.produse = JSON.parse(searchData.body).products;
});
}
I get the following error : [ts] Cannot use namespace ‘WooCommerceProvider’ as a type.
↧
↧
Show tabs menu bar in all page. If click on side menu then tabs menu bar is not visible in all pages
some trick:
in app.component.ts:
pages: PageInterface[] = [
{ title: 'HomePage', name: 'TabsControllerPage', component: TabsControllerPage, tabComponent: HomePage, index: 1, icon: 'calendar' },
{ title: 'Sign Out', name: 'SignInPage', component: SignInPage, tabComponent: LoginPage, index: 1, icon: 'contacts' },
{ title: 'My Profile', name: 'TabsControllerPage', component: TabsControllerPage, tabComponent: ProfilePage, index: 3, icon: 'map' }
];
openPage(page: PageInterface) {
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
this.nav.setRoot(page.component, params);
}
in tabscontrollerPage.ts:
myIndex: number;
...
this.myIndex = navParams.data.tabIndex || 1;
in tabscontrollerPage.html:
<ion-tabs tabsPlacement='bottom' [selectedIndex]="1">
<ion-tab [root]="searchRoot" tabIcon="ios-search-outline"></ion-tab>
<ion-tab [root]="homeRoot" tabIcon="ios-home-outline"></ion-tab>
<ion-tab [root]="contactUsRoot" tabIcon="ios-contacts-outline"></ion-tab>
<ion-tab class="test" [root]="profileRoot" *ngIf="myIndex==3" tabIcon="ios-contacts-outline"></ion-tab>
</ion-tabs>
now i have 3 tabs(search,home,contact us)
this tabs abailable from all page
but my problem now is when i click on profile from menu. it’ll make tab icon for profile 
↧
iOS 11 style InAppBrowser
Greetings again everyone,
I’ve been doing a bit more work with some clients and one of the things i’ve picked up on this time is how different the Cordova InAppBrowser plugin looks vs the native inAppBrowser. Below is when I mean:
The first picture shows a modern iOS 11 style inAppBrowser which suits the iPhone X perfectly, showing the header text and share menu etc correctly as expected. The inAppBrowser cordova plugin which is displayed at the bottom however is quite glitchy, especially on the iPhone X.
Does any one know of a native plugin, whether ionic supported or cordova which supports this more modern UI vs the old one.
All the best,
- Matt
↧
Thoughts about Capacitor
Actually you know I think I didn’t tried this. If it doesn’t work maybe you could open an issue in the Github of Capacitor. Provide a sample demo app that will help. Pretty sure they will be happy to have a look
↧
↧
Cannot use namespace 'WooCommerceProvider' as a type
Have you tried using ng2woo? That’s the direction I would go – either using someone else’s Angular wrapper, or writing my own.
↧
Capture/select Video and watch it in Ionic
I have been trying for two days all sort of native plugins in ionic, however, simply none works for this task.
Does anyone have any idea of what I could use in order to have this (theoretically) simply task done?
I would like to be able to select a video from my files, or capture it, and watch later.
Thanks in advance,
Roger A L
↧
Manage images in social network
Hi everyone! I’m developing a social network (something like Instagram).
I have a doubt about how to display photos in posts:
Method 1, result.immagine is a base64 image:
<ion-card *ngFor="let result of results">
<ion-card-header>
...
</ion-card-header>
<ion-card-content>
<img src="data:image/JPEG;base64,{{result.immagine}}"/>
</ion-card-content>
</ion-card>
Method 2, result.immagine is a link (http://www.xxxxx.it/image.jpg):
<ion-card *ngFor="let result of results">
<ion-card-header>
...
</ion-card-header>
<ion-card-content>
<img src="{{result.immagine}}"/>
</ion-card-content>
</ion-card>
Which method is better, and why?
Why method 1 doesn’t show any image, returning error for unsafe image, and how can I resolve this issue?
Thank you.
↧
Problem with native media
Hi
i want use native media for playing mp3 online file
i use this tutorial but in first i cant use this code
const file: MediaObject = this.media.create('file.mp3');
where i put that ?
thanks
↧
↧
Ionic Pro DOES NOT support `engines` on `package.json` to define node and npm versions
That’s bizarre; where I saw cordova depending on npm@2, it never got confused about anything, it used npm@2 and the ionic site used npm@5, and everything worked just fine. This wasn’t Ionic Pro, just Ionic. We’ve since removed cordova from our build, and are now using Ionic without cordova.
↧
Ionic InAppBrowser on iPhone X has white space at top
↧
Change Display with Timer
thaks for help me! 
↧
Coaching needed
Hi everybody,
I’m a new Pro user of Creator Ionic. Honestly, I just know very little about it as well as knowing very little about Apps developing. I have gone through the tutorials, but it is still difficult for me to start individually.
Therefore, I will be so grateful if anybody can coach me step by step of how to develop an App until I gain an enough knowledge and experience to depend on my self.
For the time being, I have an idea which I need to turn it to an App. basically, the App is working to facilitate purchases from specific shops. The App should give the option for the shop to create its own page and listing in it its products with prices. then the customer can use the App to search for the shop and select his/her goods and pay for them online.
Awaiting for your response.
Regards,
Mohamed
↧
↧
Angular animation resets to original state
I have an animation that occurs after a swipe on an item of an ngFor list of custom components. Each item starts with a state ‘novote’. After being swiped on, it should then be in a state either ‘upvote’ or ‘downvote’, depending on the direction swiped. The problem is that when you swipe on an object, the state changes and the animation occurs, but if you swipe on it for a second time, the state is again ‘novote,’ so the animation occurs again. If you swipe on it a third time, it is the correct state, so the animation does not occur.
My list html:
<ion-list *ngFor="let song of songList | async" [class.selected]="song">
<song-item (swipeleft)="vote(song, true)" (swiperight)="vote(song, false)" [song]="song" class="bottom-border"></song-item>
</ion-list>
song-item.html:
<ion-item (swipeleft)="toggleVoteAnim(-1)" (swiperight)="toggleVoteAnim(1)" [@myvote]="voteState">
<div> {{song.title}}<br/>
- <small>{{song.artist}}</small></div>
<div item-right>{{song.upVotes}}</div>
<div item-right>UP</div>
<div item-right>|</div>
<div item-right>DOWN</div>
<div item-right>{{song.downVotes}}</div>
</ion-item>
song-item.ts:
import { Component, Input, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
import { Song } from "../../interfaces/song";
/**
* Generated class for the SongItemComponent component.
*
* See https://angular.io/api/core/Component for more info on Angular
* Components.
*/
@Component({
selector: 'song-item',
templateUrl: 'song-item.html',
animations: [
trigger('myvote', [
state('novote', style({
backgroundColor: '#191414'
})),
state('upvote', style({
backgroundColor: '#191414'
})),
state('downvote', style({
backgroundColor: '#191414'
})),
transition('* => upvote',
animate('.25s', keyframes([
style({backgroundColor: '#191414', offset: 0}),
style({backgroundColor: '#1db954', offset: 0.25}),
style({backgroundColor: '#191414', offset: 1})
]))
),
transition('* => downvote',
animate('.25s', keyframes([
style({backgroundColor: '#191414', offset: 0}),
style({backgroundColor: '#f53d3d', offset: 0.25}),
style({backgroundColor: '#191414', offset: 1})
]))
)
])
]
})
export class SongItemComponent implements OnInit {
@Input() song: Song;
voteState = 'novote';
constructor() {}
ngOnInit() {}
/**
* Toggles the vote animation
* @param dir - direction of the swipe. -1 is left (upvote), 1 is right (downvote)
*/
toggleVoteAnim(dir: number) {
console.log('Current vote state: ' + this.voteState);
if (dir === -1) {
console.log('direction is: ' + dir);
if (this.voteState === 'novote') {
this.voteState = (this.voteState === 'novote') ? 'upvote' : 'novote';
console.log(this.song.title + " was novote, now it is: " + this.voteState);
}
if (this.voteState === 'downvote') {
this.voteState = (this.voteState === 'downvote') ? 'upvote' : 'downvote';
console.log(this.song.title + " was downvote, now it is: " + this.voteState);
}
} else if (dir === 1) {
console.log('direction is: ' + dir);
if (this.voteState === 'novote') {
this.voteState = (this.voteState === 'novote') ? 'downvote' : 'novote';
console.log(this.song.title + " was novote, now it is: " + this.voteState);
}
if (this.voteState === 'upvote') {
this.voteState = (this.voteState === 'upvote') ? 'downvote' : 'upvote';
console.log(this.song.title + " was upvote, now it is: " + this.voteState);
}
}
console.log(this.song.title + " final votestate: " + this.voteState);
}
}
On the first left swipe, it prints:
Current vote state: novote
direction is: -1
song was novote, now it is: upvote
song final votestate: upvote
So far so good.
On the second left swipe:
Current vote state: novote
direction is: -1
song was novote, now it is: upvote
song final votestate: upvote
Not good. The voteState at the start should have been ‘upvote’ not ‘novote’, as per the final votestate from the previous swipe.
On the third left swipe:
Current vote state: upvote
direction is: -1
song final votestate: upvote
This is what should have happened with the second swipe. This is awfully confusing as it was working perfectly just a couple days ago, and I don’t think any changes were made to anything involved here…
↧
Running app on Android Device
Hi,
I try to start my app using command:
ionic cordova run android --device
It’s a Taxi application and has login with Facebook option which I’m not able to use when I try to use command: ionic serve or ionic lab
I already have Java JDK, Android Studio and updated Android SDK tools.
I have also enable USB debugging and Developer Mode on Android device. When I try to use this command this error occurs:
00:24:47] lint finished in 2.88 s
Starting a Gradle Daemon (subsequent builds will be faster)
FAILURE: Build failed with an exception.
*** What went wrong:**
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at https://docs.gradle.org/4.1/userguide/gradle_daemon.html
Please read the following process output to find out more:
-----------------------
Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap
*** 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**
(node:13604) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
*** What went wrong:**
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at https://docs.gradle.org/4.1/userguide/gradle_daemon.html
Please read the following process output to find out more:
-----------------------
Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap
*** 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**
(node:13604) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[OK] Your app has been deployed.
** Did you know you can live-reload changes from your app with --livereload?**
What is wrong if I did everything from Ionic Academy tutorial: https://www.youtube.com/watch?v=Fw46diR8rAs
↧
Ionic Pro DOES NOT support `engines` on `package.json` to define node and npm versions
Sure, this issue does NOT occur out of the build system of Ionic Pro.
Thanks, I’ll think about not using cordova in my next projects that may use ionic.
And btw, I’m not sure if you understood that Ionic Pro is not another version of ionic, instead it is a platform to deploy Ionic apps. You can check more about it here: https://ionicframework.com/docs/pro/
↧
Webpackjsonp is not defined on ionic devapp
it returns:
cli packages: (C:\Users\Lee\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms : android 7.0.0 browser 5.0.3
Ionic Framework : ionic-angular 3.9.2
System:
Node : v8.9.4
npm : 5.7.1
OS : Windows 10
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
Dunno why, but DevApp is now not able to see the new app at all. It’s just stuck at Listening for apps on your network
↧
↧
Angular animation resets to original state
You are overloading your swipe actions. Only define them in the component, not in both. If the component hears swipe left, it emits “swipe left heard” and your page calls vote(song,true) when the page hears “swipe left heard.”
↧
Manage images in social network
I would use method 2, but do [src]=“result.imagine”. This is cleaner and easier to work with. If you have performance concerns - then you could figure out optimization paths.
As for method 1 - please provide more description of the error. But most likely you face DOM sanitization issue: https://angular.io/api/platform-browser/DomSanitizer
↧
Cordova Clipboard stopped working
The plugin had an update to 3 days that made it stop working …
how do I make a fok from the repository and install on ionic?
↧