Hi all,
I’ve stumbled upon an issue with processNextHandler parameter for the hardware back button callback.
(parameter) processNextHandler: any
Argument of type '(processNextHandler: any) => void' is not assignable to parameter of type '() => void | Promise<any>'
Do you have any idea what might be causing this and how to resolve it?
1 post - 1 participant
I installed the iOS beta to check my app. Everything works fine, but the page transitions are are half the speed they were, if not slower. The page titles pop in in a really strange way.
I know it’s only a beta, but has anyone else seen this yet?
1 post - 1 participant
My express server is redirecting the user to an angular page after payment success. Like below
res.redirect('http://localhost:8100/order-success')
I have jwt auth in my app. So if the user is logged in then I redirect the user to url tabs/tab1 else redirects to the login page.
So when my express server redirects the user to order-success page, the logic in jwt auth takes over and the user gets redirected to tabs/tab1 page. But I want the user to be redirected to order-success page. What is the solution?
Thank you in advance
Here is code
authentication.service.ts
export class AuthenticationService {
authenticationState = new BehaviorSubject(false);
constructor(private storageservice: StorageService, private plt: Platform, private router: Router) {
this.plt.ready().then(() => {
this.checkToken();
});
}
checkToken() {
this.storageservice.get('token').then(res => {
if (res) {
this.authenticationState.next(true);
}
})
}
login(val) {
console.log("login")
return this.storageservice.set('token', val).then(() => {
this.authenticationState.next(true);
});
}
logout() {
return this.storageservice.clear().then(() => {
this.authenticationState.next(false);
let navigationExtras : NavigationExtras = {
state : {
logout : "yes"
}
}
this.router.navigate(['home'], navigationExtras)
});
}
isAuthenticated() {
return this.authenticationState.value;
}
}
app.component.ts
this.authenticationService.authenticationState.subscribe(state => {
if (state) {
console.log(state) // state is true
this.router.navigate(['tabs/tab1']);
}
else {
console.log(state) // state is false
this.router.navigate(['home']);
}
});
1 post - 1 participant
Hello,
we update to Ionic 5 last month.
We use a barcode-scanner an therefor an ionic-button with ionic-icon “qr-code”.
In Chrome there a two of 3 locations in our app where the icon is broken:
In Firefox there are no issues.
We use it like this:
<ng-container *ngIf="(qrCodeConfigKey$ | async) === 'true'">
<ion-buttons>
<ion-button slot="icon-only"
class="barcode-scanner-button-component"
(click)="showBarcodeScannerModal()">
<ion-icon name="qr-code-outline" title="Barcode-Scanner"></ion-icon>
</ion-button>
</ion-buttons>
</ng-container>
Any ideas somebody?
1 post - 1 participant
I am using Firebase X for receiving notifications with ionic 5
I have 2 questions
First One:
when the app is in foreground and received a notification , The notification has opened automatically without clicking the notification
what should I do to prevent this action ??
Second One:
Navigating with parameters to the same page but with different parameters doesn’t change the page’s content
so how to change the page’s content with the new parameters
1 post - 1 participant
Hi there,
I’m trying to update the badge on my app’s icon to a number depending on how many new messages my app has.
I’ve tried doing this through push notifications but this didn’t seem to work for capacitor and capacitor-fcm.
Or perhaps I did something wrong there.
Not to mention, my messages aren’t always sent with notifications. Sometimes a message is placed without notification, and in those cases the badge also needs to be updated, reflecting the amount of new messages.
In any case, what i’m trying to do is use:
To fetch information in the background from my api to see how many new messages there are since last time you had the app open.
It is then trying to use:
In order to set the badge when the app is in the background.
Setting the badge when the app is in the foreground works, but I can’t seem to find a way to do this while the app is in the background. AKA when using cordova-background-fetch.
Does anyone know of a good way to get this to work on ionic 4? Or at least how this should be handled?
Please let me know,
1 post - 1 participant
I have a custom component to handle various kinds of form inputs, such as ion-input, ion-checkbox, ion-select, ion-textarea, etc.
I’ve implemented the ControlValueAccessor and it allows me to embed it inside reactive forms without any problem. the value of the control is updated when the custom component is interacted with.
However, this only works with ion-input and ion-textarea. it doesn’t correctly work with ion-select or ion-datetime, even though I’ve implemented it with the same pattern as ion-input and ion-textarea.
Any ideas?
1 post - 1 participant
Do you have someone any idea how i can implement in Ionic - Angular / typescript - Search filter for the car app like this - https://youtu.be/0FfH6OHEUws
Thank you
1 post - 1 participant
Wondering because I blindly copied the install script from the documentation page into my terminal.
The capacitor install commands on the documentation page list the cordova plugin to install. Is this correct?
npm install cordova-plugin-firebase-analytics
npm install @ionic-native/firebase-analytics
ionic cap sync
1 post - 1 participant
I’m trying to use the fade transition effect with the ion-slides component, but the option seems to be ignored when I do.
Ion-slides uses SwiperJS under the hood, with the documentation even referring to the swiperjs docs when referencing the options attribute.
These options include an “effect” parameter that enable different transition animations (swipe, cube, fade, etc).
When I try to use effect: "fade", nothing seems to happen. You can see for yourself in this test repository where I have added ion-slides to a starter application. The options I’m using are pulled directly from SwiperJS’s fade effect demo, seen working here.
If this is intentional, it should be clarified in Ionic’s documentation which options are actually usable and which are disabled. If it’s a bug, I hope that v4 is still receiving support.
[0] https://github.com/AndruC/ionic-slide-fade-test
[1] https://stackblitz.com/edit/swiper-demo-22-fade-effect?file=index.html
1 post - 1 participant
Ionic 5, following the documentation for ion-select “Objects as Values”. The example is straight up broken.
Page html
<ion-select [compareWith]="compareWith">
<ion-select-option *ngFor="let category of this.categories">{{category.name}}</ion-select-option>
</ion-select>
Category.ts
export class Category {
guid: string;
name: string;
constructor(guid, name) {
this.guid = guid;
this.name = name;
}
}
Page.ts
export class TaskPage implements OnInit {
categories: Array<Category>;
constructor() { }
ngOnInit() {
this.categories = new Array<Category>();
this.categories.push(new Category("1", "Test 1"));
this.categories.push(new Category("2", "Test 2"));
}
compareWithFn = (o1, o2) => {
return o1 && o2 ? o1.guid === o2.guid : o1 === o2;
};
compareWith = this.compareWithFn;
}
First off, I had to change the “compareWith = compareWithFn” to include the “this.”
Second, and more importantly, when I select an option, it doesn’t display what I selected and then if I try to select again, every option is selected.
This is after I selected option “Test 2”
1 post - 1 participant
Could someone share the package.json of an ionic-angular app: 3.6.0 working?
Could you also tell me how I can easily discover the dependencies required for a given version of Ionic?
My package.json
{
"name": "test-project",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@ionic-native/app-version": "^4.4.2",
"@ionic-native/camera": "^4.4.2",
"@ionic-native/core": "3.12.1",
"@ionic-native/geolocation": "^4.4.2",
"@ionic-native/native-geocoder": "^4.4.2",
"@ionic-native/splash-screen": "3.12.1",
"@ionic-native/status-bar": "^3.12.1",
"@ionic/storage": "^2.1.3",
"@types/pouchdb": "6.3.0",
"cordova-ios": "4.5.4",
"cordova-plugin-add-swift-support": "^1.7.1",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-camera": "^2.4.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-console": "^1.1.0",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-geolocation": "^2.4.3",
"cordova-plugin-nativegeocoder": "^2.0.5",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.3.3",
"intl": "^1.2.5",
"ionic-angular": "3.6.0",
"ionic-img-viewer": "^2.6.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-rating": "^1.2.2",
"ionicons": "3.0.0",
"moment": "^2.20.1",
"node-sass": "^4.7.2",
"pouchdb": "^6.3.4",
"run": "1.4.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"ts-md5": "^1.2.2",
"zone.js": "0.8.12"
},
"devDependencies": {
"@angular/cli": "^1.5.0",
"@ionic/app-scripts": "^3.1.11",
"cordova": "^8.0.0",
"ionic": "3.19.1",
"typescript": "^2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-sqlite-storage": {},
"cordova-plugin-camera": {
"CAMERA_USAGE_DESCRIPTION": "Utilizar Camera",
"PHOTOLIBRARY_USAGE_DESCRIPTION": "Utilizar Galeria Camera"
},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "Utilizar Geolocalizacao"
},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"cordova-plugin-app-version": {}
},
"platforms": [
"ios",
"browser"
]
}
}
My apps for make projects
Ionic Framework: 3.6.0
Ionic App Scripts: 3.2.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.1
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
1 post - 1 participant
Hello, what is the best way to logout?
I remove items from the localstorage, clean and navigate to the login, but when I log in again it does not work, I must use the back button and return to make it work. Any solution? Thank you…
1 post - 1 participant
Hi there,
I am getting a compilation error on cordova-ios 6.1.0 and Angular 9. XCode 11.5. The latest stack.
Not sure what is really happening, I really appreciate any tips on how to fix that:
CompileStoryboard Sample/CDVLaunchScreen.storyboard
cd /Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios
export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:/Users/mm/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands"
export XCODE_DEVELOPER_USR_PATH=/Applications/Xcode.app/Contents/Developer/usr/bin/..
/Applications/Xcode.app/Contents/Developer/usr/bin/ibtool --errors --warnings --notices --module Sample --output-partial-info-plist /Users/mm/Library/Developer/Xcode/DerivedData/Sample-bvrieshnghaqwbegvatmqkxrcaky/Build/Intermediates.noindex/Sample.build/Debug-iphonesimulator/Sample.build/CDVLaunchScreen-SBPartialInfo.plist --auto-activate-custom-fonts --target-device iphone --minimum-deployment-target 10.0 --output-format human-readable-text --compilation-directory /Users/mm/Library/Developer/Xcode/DerivedData/Sample-bvrieshnghaqwbegvatmqkxrcaky/Build/Intermediates.noindex/Sample.build/Debug-iphonesimulator/Sample.build /Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios/Sample/CDVLaunchScreen.storyboard
/* com.apple.ibtool.document.errors */
/Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios/Sample/CDVLaunchScreen.storyboard:Ze5-6b-2t3: error: Named colors do not work prior to iOS 11.0.
CompileAssetCatalog build/emulator/Sample.app Sample/Images.xcassets
cd /Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios
export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:/Users/mm/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands"
/Applications/Xcode.app/Contents/Developer/usr/bin/actool --output-format human-readable-text --notices --warnings --export-dependency-info /Users/mm/Library/Developer/Xcode/DerivedData/Sample-bvrieshnghaqwbegvatmqkxrcaky/Build/Intermediates.noindex/Sample.build/Debug-iphonesimulator/Sample.build/assetcatalog_dependencies --output-partial-info-plist /Users/mm/Library/Developer/Xcode/DerivedData/Sample-bvrieshnghaqwbegvatmqkxrcaky/Build/Intermediates.noindex/Sample.build/Debug-iphonesimulator/Sample.build/assetcatalog_generated_info.plist --app-icon AppIcon --compress-pngs --enable-on-demand-resources YES --filter-for-device-model iPhone12,8 --filter-for-device-os-version 13.5 --sticker-pack-identifier-prefix nz.co.Sample.app.sticker-pack. --development-region en --target-device iphone --minimum-deployment-target 10.0 --platform iphonesimulator --product-type com.apple.product-type.application --compile /Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios/build/emulator/Sample.app /Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios/Sample/Images.xcassets
2020-06-26 13:09:04.566 ibtoold[63485:1359377] DEBUG: Added to environment: {
TMPDIR = "/var/folders/ls/8k4nss195yvd32fycs37f2_40000gp/T/77A96612-43CD-4CEA-80DE-3AEAA615D81E";
}
** BUILD FAILED **
The following build commands failed:
CompileStoryboard Sample/CDVLaunchScreen.storyboard
(1 failure)
Command finished with error code 65: xcodebuild -workspace,Sample.xcworkspace,-scheme,Sample,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone SE (2nd generation),build,CONFIGURATION_BUILD_DIR=/Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios/build/sharedpch
xcodebuild: Command failed with exit code 65
Error: xcodebuild: Command failed with exit code 65
at ChildProcess.whenDone (/Users/mm/Documents/dev/Sample.PGK/Core/Sample.PGK.Core.Ionic/platforms/ios/cordova/node_modules/cordova-common/src/superspawn.js:136:25)
at ChildProcess.emit (events.js:182:13)
at maybeClose (internal/child_process.js:962:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
[ERROR] An error occurred while running subprocess cordova.
cordova build ios --verbose exited with exit code 65.
Re-running this command with the --verbose flag may provide more information.
ionic:utils-process onBeforeExit handler: 'process.exit' received +0ms
ionic:utils-process onBeforeExit handler: running 2 functions +1ms
ionic:utils-process processExit: exiting (exit code: 65) +79ms
I have tried this fix approach, but it didn’t work in my case.
From the error details, it seems that cordova is building on a version prior to IOS 11.
Is there a way to force the compilation process to use iOS 11?
My system details:
Ionic:
Ionic CLI : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.2.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 9.1.7
@angular/cli : 9.1.7
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : ios 6.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 5.0.0, (and 34 other plugins)
Utility:
cordova-res : not installed
native-run (update available: 1.0.0) : 0.2.2
System:
ios-deploy : 1.9.2
ios-sim : 8.0.2
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c
I really appreciate any help on this.
1 post - 1 participant
hi can anyone know why my app is hanging when i switch tabs between fast it is hanging
i am using ionic 4 and angular 8 and i have attach gif file you can check and let me know the solution
1 post - 1 participant
In our app we give the option to upload loads of images and photos at the same time. The problem is, when the app is closed the uploads fail of course. So my question is, can I make a background task so the images/videos are uploaded even when the app is closed. Or can I do it like facebook, where the image seems to be uploaded in a notification +track the progress in that push notification.
Any tips/explanations are welcome. New to any kind of background tasks so all help/explanations are welcome. We’re here to learn after all.
1 post - 1 participant
Hi,
I used to debug Ionic/Cordova apps on a device using the command:
ionic cordova run android -l
So that each modification was loaded in real-time.
How can I debug an Ionic/Capacitor app in a similar way?
Do I have to run each time these commands?
ionic build
npx cap sync android
npx cap open android
Thank you very much
cld
1 post - 1 participant
(First of all, sorry for my bad english, lol)
Y run my app in the browser in a ios responsive form, but as can you see, the app is “taking” an android design, instead an ios design. When i reload the page, the app take the correct design.
How can i resolve this issue?
1 post - 1 participant
W/Firebase-Installations: Error when communicating with the Firebase Installations server API. HTTP response: [400 Bad Request: {
"error": {
"code": 400,
"message": "API key not valid. Please pass a valid API key.",
"status": "INVALID_ARGUMENT",
"details": [
{
"@type": "type.googleapis.com/google.rpc.Help",
"links": [
{
"description": "Google developers console",
"url": "https://console.developers.google.com"
}
]
}
]
}
}
]
E/Firebase-Installations: Firebase Installations can not communicate with Firebase server APIs due to invalid configuration. Please update your Firebase initialization process and set valid Firebase options (API key, Project ID, Application ID) when initializing Firebase
java.lang.IllegalArgumentException: Please set a valid API key. A Firebase API key is required to communicate with Firebase server APIs: It authenticates your project with Google.
Estos son los errores que me aparecen en el log de android studio, cuando inicio la App crashea al instante.
Al probarlo con ionic lab no da ningún error y me funciona perfectamente el login por firebase.
Tengo puesto el firebaseConfig sacado de el proyecto web en Firebase tanto en environment.ts como en environment.prod.ts y llamado en el app.module.ts.
export const firebaseConfig = {
apiKey: "AIzaSyAzbwyFM_XIIzhlvg9O5EHTOXDSqfpZ53A",
authDomain: "homelist-42d67.firebaseapp.com",
databaseURL: "https://homelist-42d67.firebaseio.com",
projectId: "homelist-42d67",
storageBucket: "homelist-42d67.appspot.com",
messagingSenderId: "660380788284",
appId: "1:660380788284:web:d5ffad28c0caa081398539",
measurementId: "G-G329JP79PC"
};
app.module.ts
import { AngularFireModule } from "@angular/fire";
import { firebaseConfig } from './../environments/environment';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
MatIconModule,
HeaderModule,
FormsModule,
ReactiveFormsModule,
SuperTabsModule.forRoot(),
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule.enablePersistence(),
AngularFireAuthModule
],
exports:[
HeaderModule,
MatIconModule
],
providers: [
StatusBar,
SplashScreen,
AdMobFree,
ApiService,
FirestoneService,
GooglePlus,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
BarcodeScanner,
Camera
],
bootstrap: [AppComponent]
})
Después tengo el google-service.json descargado desde el proyecto de Android en Firebase, está copiado tanto en la ruta del proyecto como en la ruta plataforms/android
{
"project_info": {
"project_number": "660380788284",
"firebase_url": "https://homelist-42d67.firebaseio.com",
"project_id": "homelist-42d67",
"storage_bucket": "homelist-42d67.appspot.com"
},
"client": [{
"client_info": {
"mobilesdk_app_id": "1:660380788284:android:3238909d1054cddb398539",
"android_client_info": {
"package_name": "com.homelist"
}
},
"oauth_client": [{
"client_id": "660380788284-bp3tn0v9fi1j57a3p5nigqp980dhctie.apps.googleusercontent.com",
"client_type": 1,
"android_info": {
"package_name": "com.homelist",
"certificate_hash": "411b8bb5494cb617a4b04f6f612d202049d1c083"
}
},
{
"client_id": "660380788284-6itgp7d0pnfc6fgcg3cfp4e94o3qj013.apps.googleusercontent.com",
"client_type": 3
}
],
"api_key": [{
"current_key": "AIzaSyDRJmIAm2ZGeS70qPeJdUoq_BwahQalTkT"
}],
"services": {
"appinvite_service": {
"other_platform_oauth_client": [{
"client_id": "660380788284-6itgp7d0pnfc6fgcg3cfp4e94o3qj013.apps.googleusercontent.com",
"client_type": 3
},
{
"client_id": "660380788284-jlfcd74h2arcvv37lnb4j1eri3p2k8ph.apps.googleusercontent.com",
"client_type": 2,
"ios_info": {
"bundle_id": "com.homelist"
}
}
]
}
}
}],
"configuration_version": "1"
}
También he leído que puede ser necesario que se incluya en el config.xml
<platform name="android">
<resource-file src="google-services.json" target="app\google-services.json" />
No he encontrado ninguna solución valida.
1 post - 1 participant