Hi all,
I find no tutorial nor any documentation on Ionic’s website on how to create Android expansion files for apps that surpass the 100mb default size limit on Google Play.
Can someone help me to explain in detail how to create expansion files and link them back to the app?
My application is ~300mb and has “videos” and “audio” folder in the assets that should be stored as expansions.
Best Regards,
Astrix
1 post - 1 participant
Hi,
I have auth.service.ts with HttpClient variable loaded from constructor with method for calling my api to get information about user and his privileges and if he has still valid token. I calling this method in constructor of my app.component.ts. Its working fine. But, in same page typescript files, I calling api to get initial data for that page. In that pages I have variable of HttpClient defined from constructor.
Any idea how to resolve this? Thank you.
1 post - 1 participant
I work on angular 7 app I face Issue I can’t make left side menu work as accordion .
meaning I need when open component report category on load display all categories for all reports
then when user select specific category then it will display sub category reports related by collapse it
so in stackbliz already display data For Category and Sub category but I need it accordion .
stackbliz below have only one component name report category that have left side menu
and service name display report service that have function service and data returned .
https://stackblitz.com/edit/create-1arrvm?file=app%2Fdisplayreport.service.ts
1 post - 1 participant
Hi, I’m trying to create a capacitor plugin. But I wonder how to test it with Ionic 5 project while still coding or debugging the plugin project?
I tried to search for guideline to do this. but I cannot find its in following links:
they are just a good guideline to create then how to put code into its. but not for testing with main application project.
1 post - 1 participant
We have a scenario where application (HOME screen has Ionic TABs) does not exit when user back press from HOME screen.
STEP 1: Launch application
STEP 2: Press back (HOME screen) to exit the application.
Application does not exit. However, following scenario works fine:
STEP 1: Launch application
STEP 2: Navigate from HOME screen to any other UI screen.
STEP 3: Now back press Application Navigate to HOME screen.
STEP 4: Back press again, application exit.
Does anyone has similar issue or solution then help us.
We are using IONIC-5 & Angular-9.
Thank You.
1 post - 1 participant
I was happy with building app on PhoneGap and it was working very smooth for me. Now that apache PhoneGap has stopped giving support and apple is not accepting apps build with SDK <13, I had no another choice to change my environment from ionic cordova to ionic capacitor.
Upgrade works well. I’ve successfully upgraded from ionic v4 to ionic v5 using Angular 8. Background mode cordova plugin with ionic capacitor music control not working as expected. It plays the music in background and stopped after playing two music files.
Is this issue something related to audio session that we create when media creates. If so, how could I make it active all the time in background.
My local environment info is:
Angular CLI: 8.0.0
Node: 10.19.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.800.0 (cli-only)
@angular-devkit/build-optimizer 0.0.35
@angular-devkit/core 9.1.7
@angular-devkit/schematics 9.1.7
@angular/http 7.2.16
@schematics/angular 8.0.0 (cli-only)
@schematics/update 0.800.0 (cli-only)
rxjs 6.4.0
typescript 3.5.3
webpack 3.12.0
1 post - 1 participant
Hi All
I have signed up for the Ioniconf 2020 pretty soon after it was announced and was wondering, will there be recordings that can be watched after the event has finished? Reason why I ask, is that I am in a different time zone and will not be able to attend the whole event, but would still like to be a part of it!
1 post - 1 participant
Hello, is there any way to get some data about local notifications that have been scheduled (more than just the ID), or how to access the “extra” of a local notification?
1 post - 1 participant
For angular projects, you can create an environment.ts file and environment.prod.ts file to manage different values for dev and prod builds so that when building with --prod option, the environment.prod.ts file is used when importing environment.
This is not working for ionic 5 with react? Is there a way to achieve this with an Ionic 5 React project?
1 post - 1 participant
I’m using the BLE cordova plugin in my new app. My app is written with Ionic v5 and Angular 9.
Here is the code that scan for available devices:
import { Component, OnInit } from '@angular/core';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
import { BLE } from '@ionic-native/ble/ngx';
import { LoadingController, Platform } from '@ionic/angular';
@Component({
selector: 'app-test',
templateUrl: './test.page.html',
styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
devices: any[] = [];
constructor(
private platform: Platform,
private androidPermissions: AndroidPermissions,
private ble: BLE,
private loadingCrl: LoadingController
) { }
ngOnInit() {
this.platform.ready().then(() => {
if (this.platform.is('android') || this.platform.is('ios')) {
if (this.platform.is('android')) {
this.androidPermissions
.requestPermissions([
this.androidPermissions.PERMISSION.BLUETOOTH_ADMIN,
this.androidPermissions.PERMISSION.BLUETOOTH
])
.then(() => this.scan());
} else {
this.scan();
}
}
});
}
scan() {
this.loadingCrl.create({ message: 'Scanning... ' }).then(loading => {
loading.present();
console.log('Scanning...');
this.ble.scan([], 5).subscribe(device => {
console.log(JSON.stringify(device));
this.devices.push(device);
loading.dismiss();
});
});
}
}
The app asks for location permissions but doesn’t ask for bluetooth. The scanning runs forever.
I run my app on an Android 9 device with:
ionic cordova run android -l
1 post - 1 participant
Hey guys,
I’m developing an application with Ionic/Angular as frontend and Java Spring boot as backend.
When they’re both running om my laptop the communication between them works perfectly. Currently i’m trying with the APK (both debug and signed) on my mobile phone, but it cannot make any calls to my backend. I have tried all the above suggestions but with no success.
Whitelist plugin is added, permissions are set, access-origins (*) is set and allow-navigation (set to wildcard). Am I missing something?
Thanks in advance!
1 post - 1 participant
Hi, I am a very faithful user of ionic, have been for years. There are however a few things that lack here like all big frameworks do. That is a swipable material like tab-swiper. I came across a few which are not that flexible to use. They don’t support on desktop, etc.
With the advent of Stncil, ionic is deadly and more powerful than ever. So, I decided to leverage that power and made a long wanting tab-swiper which has animation and ripple effect.
As this is made with stencil, it not only supports all platforms but all frameworks. Even just a cdn will work in vanilla js. Here is the link to the npm package. Please suggest me if you found any bug or the documentation in npm to better.
npm: https://www.npmjs.com/package/mat-tab-swiper
I was not surprised to see 975 downloads in merely 30-35 hours as this thing has a huge demand not only in ionic fraternity but web as a whole.
Tested with ionic(angular), React, VanillaJS. Will be testing with Vue and Ember soon. I am using it in one ionic project of mine in production and flawlessly. The following example is of a vanillajs used with just a cdn.
1 post - 1 participant
Hi everyone,
I’m trying to display an app icon on the right of my push notification called a large icon in fcm push notifications.
However, this large icon is not capable of being set by the fcm payload through http calls according to this conversation: https://github.com/firebase/quickstart-android/issues/84
I was however wondering whether this icon can be set inside the plugin code for capacitor’s push notifications plugin.
I have seen other apps making use of the large icon so I’m pretty sure it must somehow be possible. Even if that means I can only set a single application icon, I’d already appreciate that.
Does anyone know of a working solution?
Yours truly,
Simbaclaws
1 post - 1 participant
Hi there!
I am developing a capacitor plugin. I followed these instructions and the plugin is working. I would like to do some refactoring now. To be more precise, I would like to export some interfaces along with the plugin methods which the clients of the plugin can consume (e.g. interfaces encapsulating the parameters of the plugin methods). I am quite new to the React/Typescript environment. I know how to export objects in a “normal” Typescript setting, but for me this plugin system is kind of a closed book and I would be very happy if somebody could elaborate on this a little.
Thank you very much in advance.
Rony
1 post - 1 participant
Hi,
Dependency failing: com.google.android.gms:play-services-clearcut:11.0.4 -> com.google.android.gms:play-services-tasks@[
11.0.4], but play-services-tasks version was 17.0.0.
The following dependencies are project dependencies that are direct or have transitive dependencies that lead to the art
ifact with the issue.
– Project ‘app’ depends onto com.google.android.gms:play-services-ads@11.0.4
– Project ‘app’ depends onto com.google.firebase:firebase-messaging@11.0.4
– Project ‘app’ depends onto com.google.android.gms:play-services-clearcut@11.0.4
– Project ‘app’ depends onto com.google.android.gms:play-services-tasks@17.0.0
– Project ‘app’ depends onto com.google.android.gms:play-services-base@17.0.0
– Project ‘app’ depends onto com.google.firebase:firebase-common@18.0.0
– Project ‘app’ depends onto com.google.android.gms:play-services-safetynet@11.0.4
– Project ‘app’ depends onto com.google.firebase:firebase-iid-interop@17.0.0
– Project ‘app’ depends onto com.google.firebase:firebase-iid@19.0.0
– Project ‘app’ depends onto com.google.firebase:firebase-messaging@19.0.0
– Project ‘app’ depends onto com.google.android.gms:play-services-base@11.0.4
For extended debugging info execute Gradle from the command line with ./gradlew --info :app:assembleDebug to see the dep
endency paths to the artifact. This error message came from the google-services Gradle plugin, report issues at https://
github.com/google/play-services-plugins and disable by adding “googleServices { disableVersionCheck = false }” to your b
uild.gradle file.
My Project.properties
target=android-28
android.library.reference.1=CordovaLib
android.library.reference.2=app
cordova.system.library.1=androidx.annotation:annotation:1.0.0
cordova.system.library.2=com.google.firebase:firebase-messaging:11.0.4
cordova.gradle.include.1=cordova-plugin-fcm-with-dependecy-updated/disease-FCMPlugin.gradle
cordova.gradle.include.2=cordova-plugin-badge/disease-badge.gradle
cordova.system.library.3=androidx.legacy:legacy-support-v4:1.0.0
cordova.gradle.include.3=cordova-plugin-local-notification/disease-localnotification.gradle
cordova.system.library.4=androidx.legacy:legacy-support-v4:1.0.0
cordova.system.library.5=com.google.android.gms:play-services-base:11.0.4
cordova.system.library.6=com.google.android.gms:play-services-ads:11.0.4
I have updated firebase-messaging from 19.0.0 to 11.0.4
Plugin.xml for FCM
I have updated 19.0.0 to 11.0.4
1 post - 1 participant
I am trying to create an app that displays a large amount of data. While compiling the app locally, I have experienced the “JavaScript heap out of memory” error that so many other have seen.
I develop on both Mac and Windows machines. On my Mac, I fixed this issue by adding:
export NODE_OPTIONS=--max_old_space_size=16384
to my .zshrc.
On windows I modified several files in node_modules.bin to look like this: (The files I modified all started with ng.)
if (Test-Path "$basedir/node$exe") {
& "$basedir/node$exe" --max_old_space_size=16384 "$basedir/../@angular/cli/bin/ng" $args
$ret=$LASTEXITCODE
} else {
& "node$exe" --max_old_space_size=16384 "$basedir/../@angular/cli/bin/ng" $args
$ret=$LASTEXITCODE
}
(Yes, 16384 is 16 GB of RAM. My app isn’t nearly that big. I set it there because I have the RAM to spare and don’t want to deal with this again.)
When I try to use AppFlow to build, predictably, I get this same error. Does anyone have a solution for this? Can I set environmental variables on the VM that is doing the build? Do I modify package.json scripts to include --max_old_space_size=16384?
I have been told in the past by tech support not to include node_modules in my git repository or it won’t build so I think the fix I used for Windows is not possible here. (Willing to be wrong.)
I have seen in some older postings that I should upgrade app-scripts. I don’t have that in my package.json. I have also seen people talk about editing ionic.cmd. I don’t have that file either. I assume that advice is for older versions of ionic?
The research I have done shows that a lot of people have this problem building locally with Ionic, but I don’t see anyone discussing the problem with AppFlow. I hope that’s because the problem is trivial to fix and my inexperience is the main issue.
Thanks for reading this. Any help would be appreciated.
My package.json file for reference:
{
“name”: “redacted”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
“@angular/cdk”: “^9.2.4”,
“@angular/common”: “~9.1.6”,
“@angular/core”: “~9.1.6”,
“@angular/forms”: “~9.1.6”,
“@angular/material”: “^9.2.4”,
“@angular/platform-browser”: “~9.1.6”,
“@angular/platform-browser-dynamic”: “~9.1.6”,
“@angular/router”: “~9.1.6”,
“@capacitor/android”: “^2.1.0”,
“@capacitor/core”: “2.1.0”,
“@capacitor/ios”: “^2.1.0”,
“@ionic-native/core”: “^5.0.7”,
“@ionic-native/splash-screen”: “^5.0.0”,
“@ionic-native/status-bar”: “^5.0.0”,
“@ionic/angular”: “^5.0.0”,
“rxjs”: “~6.5.1”,
“tslib”: “^1.10.0”,
“zone.js”: “~0.10.2”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~0.901.5”,
“@angular/cli”: “~9.1.5”,
“@angular/compiler”: “~9.1.6”,
“@angular/compiler-cli”: “~9.1.6”,
“@angular/language-service”: “~9.1.6”,
“@capacitor/cli”: “2.1.0”,
“@ionic/angular-toolkit”: “^2.1.1”,
“@types/jasmine”: “~3.5.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “^12.11.1”,
“codelyzer”: “^5.1.2”,
“jasmine-core”: “~3.5.0”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~5.0.0”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage-istanbul-reporter”: “~2.1.0”,
“karma-jasmine”: “~3.0.1”,
“karma-jasmine-html-reporter”: “^1.4.2”,
“protractor”: “~5.4.3”,
“ts-node”: “~8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “~3.8.3”
},
“description”: “An Ionic project”
}
1 post - 1 participant
Hi,
I submitted my app build 1.0 to AppStoreConnect via xcode. I received email from Apple for issues regarding Push Notification and Geolocation which both I don’t have in my app.
The email I received:
Blockquote
ITMS-90078: Missing Push Notification Entitlement - Your app appears to register with the Apple Push Notification service, but the app signature’s entitlements do not include the “aps-environment” entitlement. If your app uses the Apple Push Notification service, make sure your App ID is enabled for Push Notification in the Provisioning Portal, and resubmit after signing your app with a Distribution provisioning profile that includes the “aps-environment” entitlement. Xcode does not automatically copy the aps-environment entitlement from provisioning profiles at build time. This behavior is intentional. To use this entitlement, either enable Push Notifications in the project editor’s Capabilities pane, or manually add the entitlement to your entitlements file. For more information, see https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/HandlingRemoteNotifications.html#//apple_ref/doc/uid/TP40008194-CH6-SW1.
Blockquote
ITMS-90683: Missing Purpose String in Info.plist - Your app’s code references one or more APIs that access sensitive user data. The app’s Info.plist file should contain a NSLocationWhenInUseUsageDescription key with a user-facing purpose string explaining clearly and completely why your app needs the data. Starting Spring 2019, all apps submitted to the App Store that access user data are required to include a purpose string. If you’re using external libraries or SDKs, they may reference APIs that require a purpose string. While your app might not use these APIs, a purpose string is still required. You can contact the developer of the library or SDK and request they release a version of their code that doesn’t contain the APIs. Learn more (https://developer.apple.com/documentation/uikit/core_app/protecting_the_user_s_privacy).
Blockquote
After you’ve corrected the issues, you can upload a new binary to App Store Connect.
So I’m really confused, because I don’t have Push Notification and if I try to solve the second issue (geolocation) and add purpose string, I don’t know what to add since I don’t have geolocation required in my app, I’m afraid I put text that apple would consider as fraud.
Please help me solve this issue
Thank you!
1 post - 1 participant
Is it possible to structure an ionic app to have one “core” project which is the main app developed (from here I will refer to this as the ‘product’) and then have many project repositories that include this “product” and you could then extend this core product for the specific project/client needs?
The project repositories would then include environment config files and customisations to the core product, and only include the product itself as a dependency fixed at a specific version. You could then build/deploy apps for someone, keeping your core repo ‘clean’ of customisations.
Is this something that exists? Can it be done? Has someone out there come up with a good workflow for this use-case?
1 post - 1 participant
I have a simple form with two fields: username and email. My test looks like this:
...
fit('should create', () => {
console.log(fixture.debugElement.nativeElement.childNodes);
expect(component).toBeTruthy();
});
....
I just added console.log to generated spec file. As you can see from the output below the ion-input elements do not contain input element. Do you know why? (I need it to run blur handler that is attached to input)
LOG: NodeList{0: <form _ngcontent-a-c0="" novalidate="" ng-reflect-form="[object Object]" class="ng-untouched ng-pristine ng-invalid"><div _ngcontent-a-c0=""><!--bindings={
"ng-reflect-ng-if": "false"
}--><ion-item _ngcontent-a-c0="" class="ion-untouched ion-pristine ion-invalid"><!--bindings={
"ng-reflect-ng-if": "true"
}--><ion-label _ngcontent-a-c0="" color="medium" position="floating" ng-reflect-color="medium" ng-reflect-position="floating">Username</ion-label><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--><ion-input _ngcontent-a-c0="" formcontrolname="username" type="text" ng-reflect-type="text" ng-reflect-name="username" class="ng-untouched ng-pristine ng-invalid ion-untouched ion-pristine ion-invalid"></ion-input></ion-item><ion-item _ngcontent-a-c0="" class="ion-untouched ion-pristine ion-valid"><!--bindings={
"ng-reflect-ng-if": "true"
}--><ion-label _ngcontent-a-c0="" color="medium" position="floating" ng-reflect-color="medium" ng-reflect-position="floating">Email</ion-label><!--bindings={
"ng-reflect-ng-if": "false"
}--><ion-input _ngcontent-a-c0="" formcontrolname="email" readonly="true" type="email" ng-reflect-readonly="true" ng-reflect-type="email" ng-reflect-name="email" class="ng-untouched ng-pristine ng-valid ion-untouched ion-pristine ion-valid"></ion-input></ion-item><ion-input _ngcontent-a-c0="" formcontrolname="token" type="hidden" ng-reflect-type="hidden" ng-reflect-name="token" class="ng-untouched ng-pristine ng-invalid ion-untouched ion-pristine ion-invalid"></ion-input></div><div _ngcontent-a-c0="" class="ion-padding-top"><ion-button _ngcontent-a-c0="" expand="block" size="large" type="submit" ng-reflect-disabled="true" ng-reflect-expand="block" ng-reflect-size="large" ng-reflect-type="submit">Register</ion-button></div></form>}
1 post - 1 participant
Hi all,
I am trying to get back into coding after not doing some for years since uni so apologies if this is a basic question. I am trying to store arrays of data entered by the user and photos for my expenses app.
From the documentation (https://capacitor.ionicframework.com/docs/apis/storage/) I get you to need to use
async setObject, async getObject() etc. but I am unsure how I feed my array into this. My homepage.ts is copied below. My inputs come from (click) on. I have also added a picture of my code if that’s simpler to read.
Anh help on this at all would be great. I can get it to work for single bits of data but no arrays.
Thanks,
Dave
import { Component } fro`m '@angular/core';`
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
const { Storage} = Plugins;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
Expense_amount: number;
Expense_reason: string;
total_exp_start: number = 0;
result: number =0;
expList = [];
newItem;
Expense;
dateTime;
photo: SafeResourceUrl;
add(){
this.dateTime = new Date();
this.result += this.Expense_amount;
this.newItem = this.Expense_reason + '|| Expense Amount: £' + this.Expense_amount;
this.expList.push({Expense: 'Expense Reason: ' + this.newItem + ' || Date of Expense: '+ this.dateTime });
}
clear(){
this.Expense_amount = 0;
this.Expense_reason ="";
}
constructor(private sanitizer: DomSanitizer) {}
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
}
async setItem() {
const this.expList = JSON.stringify
await Storage.set({
key: this.Expense_reason,
value: this.expList,
})
}
}`Preformatted text`
1 post - 1 participant