@gautierm wrote:
Hello,
I follow, step by step, the tutorial My First App (Ionic/Angular). On the server, I can take many pictures and all of them are displayed on the screen. Good …
On Android device, I can take pictures, but only a little square is displayed on the screen. A square for each image. If I close the app and re-run it, I see as many squares as images taken.Have you an good idea for fix this problem ?
Thanks
Posts: 1
Participants: 1
@djoxna wrote:
Hey! Did anyone else had a problem with using cordova-plugin-zeroconf on Android? Everything is working okay on iOS.
zeroconf.watch('_http._tcp.', 'local.', ({ action, service }) => { console.log(service) if (action === "resolved") { console.log(service) } else if (action === "removed") { console.log(service) } }, err => console.log(err))The error I’m getting is:
Error: Attempt to invoke interface method ‘boolean java.util.Enumeration.hasMoreElements()’ on a null object reference
Posts: 1
Participants: 1
@johnmobiledev wrote:
Hi Guys,
I am not able to create project through ionic cli, i am getting below error
ionic start test 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
Preparing directory ./test - done!
Downloading and extracting tabs starter - done!
? Integrate your new app with Capacitor to target native iOS and Android? NoInstalling dependencies may take several minutes.
──────────────────────────────────────────────────────────────────────────────
Ionic Advisory, tailored solutions and expert services by Ionic Go to market faster 🏆 Real-time troubleshooting and guidance 💁 Custom training, best practices, code and architecture reviews 🔎 Customized strategies for every phase of the development lifecycle 🔮 👉 https://ion.link/advisory 👈──────────────────────────────────────────────────────────────────────────────
npm i
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! Unexpected end of JSON input while parsing near ‘…1.0-rc.3","peerDepen’npm ERR! A complete log of this run can be found in:
npm ERR! /Users/SasilGabriel/.npm/_logs/2020-05-21T14_19_51_040Z-debug.log
[ERROR] An error occurred while running subprocess npm.npm i exited with exit code 1. Re-running this command with the --verbose flag may provide more information.and my ionic info details as below.
Ionic:Ionic CLI : 6.9.2 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : not installed
@angular-devkit/schematics : not installed
@angular/cli : not installed
@ionic/angular-toolkit : not installedUtility:
cordova-res : not installed
native-run : not installedSystem:
NodeJS : v12.16.3 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS MojaveKindly do the needful resolve this issue.
Regards,
John
Posts: 1
Participants: 1
@douglapsley wrote:
I can’t seem to get custom Angular components to display in Ionic 5.
Steps to reproduce:
- Generate a blank Ionic app
- Generate a component with
ionic generate component components/dougi- Import Component reference into app.module.ts
- Add class reference to declarations, entryComponents, exports etc (none seem to make any difference)
- Add to the home.page.html file
/components/dougi/dougi.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-dougi', templateUrl: './dougi.component.html', styleUrls: ['./dougi.component.scss'], }) export class DougiComponent implements OnInit { constructor() { } ngOnInit() {} }home.page.html
<ion-header [translucent]="true"> <ion-toolbar> <ion-title> Blank </ion-title> </ion-toolbar> </ion-header> <ion-content [fullscreen]="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Blank</ion-title> </ion-toolbar> </ion-header> <div id="container"> <app-dougi></app-dougi> </div> </ion-content>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 { DougiComponent } from './components/dougi/dougi.component'; @NgModule({ declarations: [ AppComponent, DougiComponent ], entryComponents: [ DougiComponent ], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent], exports: [ DougiComponent ] }) export class AppModule {}Browser console output:
'app-dougi' is not a known element: 1. If 'app-dougi' is an Angular component, then verify that it is part of this module. 2. If 'app-dougi' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.What am I doing wrong please?
Posts: 1
Participants: 1
@mnavatru wrote:
Describe the bug
I added theSuperTabsModule.forRoot()to the app.module.ts. and theSuperTabsModuleto home.module.ts. I also put all the<super-tabs>on home.page.html. The menu works so far perfect, but when I import theSuperTabsinto the home.page.ts and declare it in the constructor, I get the error.To Reproduce
Steps to reproduce the behavior:app.module.ts
import { SuperTabsModule } from '@ionic-super-tabs/angular'; imports: [ ... SuperTabsModule.forRoot() ]home.module.ts
import { SuperTabsModule } from '@ionic-super-tabs/angular'; @NgModule({ imports: [ ... SuperTabsModule, ]home.page.html
<ion-header [translucent]="true" class="ion-no-border"> <ion-toolbar> ... </ion-toolbar> </ion-header> <super-tabs> <super-tabs-toolbar slot="top" color="secondary"> <super-tab-button> <ion-icon name="person"></ion-icon> <ion-label>Person</ion-label> </super-tab-button> <super-tab-button> <ion-icon name="checkbox"></ion-icon> <ion-label>Tasks</ion-label> </super-tab-button> <super-tab-button> <ion-icon name="analytics"></ion-icon> <ion-label>Follows</ion-label> </super-tab-button> </super-tabs-toolbar> <super-tabs-container> <super-tab> Person </super-tab> <super-tab> Tasks </super-tab> <super-tab> Follows </super-tab> </super-tabs-container> </super-tabs>Until here everything works fine, the supertab works fine, but when I add this code to home.page.ts the error appears.
home.page.ts
import { SuperTabs } from '@ionic-super-tabs/angular'; ... constructor( ... private superTabs: SuperTabs ) {The error NullInjectorError: No provider for SuperTabs! appears
Screenshots
Desktop (please complete the following information):
- OS: macOS Catalina
- Version 10.15.4
Additional context
This is my package.json{ "name": "abc", "version": "1.0.0", ... "scripts": { ... }, "private": true, "dependencies": { "@angular/common": "~8.2.14", "@angular/core": "~8.2.14", "@angular/forms": "~8.2.14", "@angular/platform-browser": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", "@capacitor/android": "^2.1.0", "@capacitor/core": "2.0.1", "@capacitor/ios": "^2.1.0", "@ionic-native/call-number": "^5.26.0", "@ionic-native/contacts": "^5.26.0", "@ionic-native/core": "^5.26.0", "@ionic-native/social-sharing": "^5.26.0", "@ionic-native/splash-screen": "^5.26.0", "@ionic-native/status-bar": "^5.26.0", "@ionic-super-tabs/angular": "^6.4.0", "@ionic/angular": "^5.1.1", "@ionic/storage": "^2.2.0", "call-number": "^1.0.1", "cordova-plugin-contacts": "^3.0.1", "cordova-plugin-x-socialsharing": "^5.6.7", "cordova-sqlite-storage": "^5.0.0", "core-js": "^2.5.4", "es6-promise-plugin": "^4.2.2", "rxjs": "~6.5.1", "tslib": "^1.13.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.803.20", "@angular/cli": "~8.3.23", "@angular/compiler": "~8.2.14", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", "@capacitor/cli": "2.0.1", "@ionic/angular-toolkit": "^2.1.1", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.5.4", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.4.3" }, "description": "abc" }
Posts: 1
Participants: 1
@utkugokcan wrote:
Hi everyone!
I am developing Capacitor based Ionic application. I built this app for pwa then I published to my server. However, when I try to access any page with definite URL (like: example.com/page/parameter), server responds 404 Not Found error, but I can reach any page inside app. I think a couple of configuration missing in any config file but I could not find anything. My app uses RouteReuseStrategy with IonicRouteStrategy as default.
Actually I would like to post screenshot maybe rendering of 404 page can help anyone to find out reason or solution.
Thanks in advance.
Posts: 1
Participants: 1
@Staal wrote:
I’m trying to create a, cordova, multi app following https://medium.com/angular-in-depth/building-an-ionic-multi-app-project-with-shared-angular-library-c9fa0383fd71
My use case is that 2 apps which differs only in config.xml, environment files and a single service (authentication). I’d like my extracted shared library to depend on the app specific environment files and my authentication service, but I’m not sure how to go about this seeing as including either in my ‘shared’ libarary via include is bound to fail:
import { environment } from '../../apps/appOne/environments/environment';I’m looking for a way to inject these into my shared code as the first thing when my app launches.
Posts: 1
Participants: 1
@BrentAshWilliams wrote:
My project is currently using ionic 4. I have had no build problems until today.
I am seeing the following error:
native-run android --app platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk --device [native-run] Selected hardware device 9A311FFAZ00BDM [native-run] Installing platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk... [native-run] ERR_UNKNOWN: Non-zero exit code from adb: 1 [ERROR] An error occurred while running subprocess native-run. native-run android --app platforms/android/app/build/outputs/apk/release/app-rel... exited with exit code 1.My ionic info is as follows:
Ionic: Ionic CLI : 6.8.0 (/Users/lester2/.nvm/versions/node/v12.9.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 4.11.10 @angular-devkit/build-angular : 0.803.26 @angular-devkit/schematics : 8.3.26 @angular/cli : 8.3.26 @ionic/angular-toolkit : 2.2.0 Cordova: Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0, ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins) Utility: cordova-res (update available: 0.14.0) : 0.6.0 native-run (update available: 1.0.0) : 0.2.8 System: ios-deploy : 1.9.4 ios-sim : 8.0.2 NodeJS : v12.9.0 (/Users/lester2/.nvm/versions/node/v12.9.0/bin/node) npm : 6.14.4 OS : macOS Catalina Xcode : Xcode 11.4.1 Build version 11E503aAny help would be greatly appreciated.
Posts: 2
Participants: 1
@jamiechong wrote:
I’m trying to add a
loadedclass toIonImgwhen the image loads. According to docs I should be able to listen to aionDidLoadevent. But it doesn’t seem to trigger.This is the simple component I’ve created:
const LazyImage = ({src}) => { const [ loaded, setLoaded ] = useState(); return <IonImg src={src} onImgDidLoad={() => setLoaded('loaded')} className={loaded} /> }Note that I’m using
onImgDidLoadinstead ofionImgDidLoadas it seems the convention for react is to drop theifor events? I’ve tried both, neither work.
Posts: 1
Participants: 1
@accron wrote:
I’m trying to install the plugin https://github.com/go-u/capacitor-keep-screen-on
When I donpx cap sync android, as per the instructions, I get the error:In file included from ../src/binding.cc:3: ../node_modules/nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’: ../node_modules/nan/nan.h:2294:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type] 2294 | , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete) | ^ In file included from ../src/binding.cc:1: ../src/binding.cc: At global scope: /home/user/.cache/node-gyp/12.16.3/include/node/node.h:608:43: warning: cast between incompatible function types from ‘void (*)(v8::Local<v8::Object>)’ to ‘node::addon_register_func’ {aka ‘void (*)(v8::Local<v8::Object>, v8::Local<v8::Value>, void*)’} [-Wcast-function-type] 608 | (node::addon_register_func) (regfunc), \ | ^ /home/user/.cache/node-gyp/12.16.3/include/node/node.h:642:3: note: in expansion of macro ‘NODE_MODULE_X’ 642 | NODE_MODULE_X(modname, regfunc, NULL, 0) // NOLINT (readability/null_usage) | ^~~~~~~~~~~~~ ../src/binding.cc:632:3: note: in expansion of macro ‘NODE_MODULE’ 632 | NODE_MODULE(cap, init);I have no idea what it’s saying.
Any ideas?
Posts: 1
Participants: 1
@joelmeaders wrote:
I hope this is simple. I need Ionic to not keep some/all pages/components in the “stack” once the page is navigated away from. This isn’t an issue in realtime apps but with apps without realtime connections it becomes an issue.
For Example, a user sees a list of items. A user clicks on an item which navigates to a new page and the user edits that item. They click to go back (menu button, toolbar back button, browser button) and the data is still the old data because the ion-router keeps the old page in the stack.
I need the page to be destroyed when the user navigates away from a page. I would prefer not use Ionic lifecycle events because it’s out of my control if I am told to use a different framework. Creating some service to communicate “hey re-run your ngOnInit lifecycle event” is overkill. The only Angular event I use is OnDestroy because my apps are developed reactively using observables for everything.
There were a few similar questions in the past but they only had workarounds.
Posts: 1
Participants: 1
@mhartington wrote:
Hey everyone, hope you are all doing great today!
We are excite to announce the first ever Ionic conference, IoniConf 2020!
This will be a free online event, June 24th 2020, and will be filled with amazing speakers.
Sign up and register for the event below
Posts: 1
Participants: 1
@Roben2306 wrote:
I didn’t find how to make two columns in sigle row as I designed in the picture.
Posts: 1
Participants: 1
Hi,
IONIC 5 Cordova android/ios - the button/item click(router.navigate) inside a toolbar is not triggering navAnimation. I tried the custom animation from this post. This animation is working when router.navigate called from content control clicks. https://github.com/mhartington/v5-animations/blob/4dbe2c81d8acdfe916f5ff13c14b90432edf85d1/src/app/app.module.ts.
I have 2 versions but both of them working. One is with ion-header/ion-toolbar/ion-item/button. The other with ion-header/<toolbar component with button/item>. I tried the back button inside a toolbar as well. For some reason navAnimation is not triggering when router.navigate initiated from a control inside toolbar. The issues is in both ios and android.
I need to implement a different animation when clicked on button/item click navigate to a page. Appreciate your help on this issue.
1 post - 1 participant
I have Ionic Native Push notification enabled on my app, that’s through FirebaseX.
My problem is that I get notification if the app is open in foreground but if it’s in Background I get nothing.
When I pull up the app, it delivers.
Can anybody shine a light?
Here is my service:
Preparing directory ./test - done!
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FirebaseX } from '@ionic-native/firebase-x/ngx';
import { AngularFirestore } from '@angular/fire/firestore';
import { Platform } from '@ionic/angular';
import { LoginService } from './login.service';
@Injectable()
export class FCMProvider {
constructor(
public firebaseX: FirebaseX,
public afs: AngularFirestore,
private platform: Platform,
private loginService: LoginService
) {}
async getToken() {
let token;
if (this.platform.is('android')) {
token = await this.firebaseX.getToken();
}
if (this.platform.is('ios')) {
const hasPermission = await this.firebaseX.hasPermission();
if (!hasPermission) {
await this.firebaseX.grantPermission();
} else {
token = await this.firebaseX.getToken();
}
}
console.log(token);
return this.saveTokenToFirestore(token);
}
saveTokenToFirestore(token: string) {
if (!token) {
return;
}
const devicesRef = this.afs.collection('devices');
let userOs;
if (this.platform.is('ios')) {
userOs = 'ios';
} else {
userOs = 'android';
}
const docData = {
token,
os: userOs,
userID: this.loginService.getUID()
};
return devicesRef.doc(token).set(docData);
}
listenToNotifications() {
return this.firebaseX.onMessageReceived();
}
}
and on my app.component.ts I got this right after deviceReady:
pushNotification() {
this.fcProvider.getToken();
this.fcProvider.listenToNotifications()
.pipe(
tap(msg => {
const toast = this.toastCtrl.create({
message: msg.body,
duration: 4000
});
toast.then(a => a.present());
})
)
.subscribe();
}
I’m sending the messages though postman:
{
"to": "e749fugfe793hfhwifh8988799f:...",
"name": "my_notification",
"data": {
"title": "Test",
"body": "This is just a test notification",
"notification_foreground": "true",
"notification_body" : "Notification body",
"notification_title": "Notification title",
"forceStart": "1"
},
"priority": "high"
}
1 post - 1 participant
Hola soy nuevo en Ionic, ¿alguien podrá ayudarme? actualmente yo estoy desarrollando una App para ofrecer los productos de mi negocio.
Dentro de la App me gustaría brindarle a los usuarios diferentes métodos de pago, principalmente me gustaría implementar los métodos de pago locales (Oxxo), tarjetas de debido y transferencia interbancaria (SPEI).
Estoy utilizando Stripe para ofrecer los métodos de pago, pero no he logrado implementarla con éxito.
Alguien sabrá de algún tutorial detallado donde pueda guiarme para lograr mi objetivo, he intentado con la documentación oficial de Ionic sin embargo no he tenido éxito.
Esta es la versión de Ionic con la que estoy trabajando:
Ionic:
Ionic CLI : 6.6.0 (C:\Users\root\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.1
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)
Utility:
cordova-res (update available: 0.13.1) : 0.9.0
native-run (update available: 1.0.0) : 0.3.0
System:
Android SDK Tools : 26.1.1 (C:\Users\root\AppData\Local\Android\Sdk)
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.3
OS : Windows 7
Excuse my writing in English, I don’t master it much:
Hi, I’m new to Ionic, can anyone help me? I am developering an application to offer the products of my business.
Within the application I would like to provide users with different payment methods, mainly I would like to implement local payment methods (Oxxo México), debit cards and interbank transfer (SPEI).
I am using Stripe to offer the payment methods, but I have not been able to implement it successfully.
Someone will know of some detailed tutorial where you can guide me to achieve my goal, I tried with the official Ionic documentation, however I was not successful.
This is the version of Ionic with which I am working:
Ionic:
Ionic CLI : 6.6.0 (C:\Users\root\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.1
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)
Utility:
cordova-res (update available: 0.13.1) : 0.9.0
native-run (update available: 1.0.0) : 0.3.0
System:
Android SDK Tools : 26.1.1 (C:\Users\root\AppData\Local\Android\Sdk)
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.3
OS : Windows 7
1 post - 1 participant
I am trying to call Restful API on iPhone with .net backend .
Just for ios 13.4.1 I am getting the below error:
Request header field Authorization is not allowed by Access-Control-Allow-Headers
XMLHttpRequest cannot load http:***** due to access control checks.
Ionic:
ionic (Ionic CLI) : 4.2.1
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.3
Cordova:
cordova (Cordova CLI) : 8.1.2
Cordova Platforms : ios 5.1.1
Cordova Plugins :cordova-plugin-advanced-http 2.4.1
cordova-plugin-ionic-webview 4.2.1
1 post - 1 participant
I have some ion-tabs and my routing builds off from there. My question is how can I hide the tabs on certain pages once my routing reaches a certain point? I have a page that gets loaded in as a tab and that page has child pages which I don’t want to have the tabs in view.
1 post - 1 participant
Hi,
Can anybody help me with a solution to build custom pagination for ion-slides? I have looked into swiper.js documentation but was not able to get the desired results (something similar to this) for developing custom pagination.
Thank you…!
1 post - 1 participant
Just for testing purpose I’m trying to access native device features for which I’ve installed a blank new project and here’s my home.page.ts file
import { Component } from '@angular/core';
import { Flashlight } from '@ionic-native/flashlight/ngx';
// import { Sim } from '@ionic-native/sim/ngx';
import { Keyboard } from '@ionic-native/keyboard/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
private flashlight: Flashlight,
// private sim: Sim,
private keyboard: Keyboard) {
flashlight.switchOn();
// sim.getSimInfo().then(info => {
// alert('Sim info: ' + info);
// });
keyboard.show();
}
}
But when I run the app using Android studio, I get this error, even though I’m not using any of google services.
File google-services.json is missing. The Google Services Plugin cannot function without it ionic
Upon searching on google, people were telling to place the file obtained from firebase bla bla bla in src or root folder, but the question is I’m not using any of firebase feature or any other
1 post - 1 participant