I am at a complete loss here. I have been developing an app in Ionic 5 for 6 months now. I am attempting to make a POC to create a photoAlbum on a device and save photos to that album. I found the recommended Capacitor-Community/Media and went ahead and installed it.
When i add
import { Media } from '@capacitor-community/media';
to a ts file the build fails immediately
This is an out of the box Ionic 6 Tabs starter template with Angular.
What is going on here?
1 post - 1 participant
Getting this when I try to follow the update procedure. Same for sudo before the install. Is it my network / npm version or a know bug?
npm install @ionic/angular@6
npm ERR! Unexpected end of JSON input while parsing near '...8sEtVUTtP+ZQth30nviPF'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/me/.npm/_logs/2022-03-08T22_23_45_465Z-debug.log
1 post - 1 participant
Hi,
In our Ionic Vue app we added some custom components, which have their own styles. For consistency, we want to use the same colors as the standard Ionic components.
Our stylesheets are structured this way:
For example, if I add this to custom.css:
.my-component {
color: var(--ion-text-color);
background-color: var(--ion-card-background);
}
and then in main.ts:
// ...
import "./theme/variables.css";
import "./theme/custom.css";
// ...
The styles are not applied.
For example, checking the background-color from Chrome DevTools, I see that the style (correctly) is background-color: var(--ion-card-background);, but see the message --ion-card-background is not defined when hovering the variable name in the “Styles” tab of the DevTools.
Is there any way to use these CSS variables in custom CSS stylesheets?
Thanks in advance!
1 post - 1 participant
Hi,
I am trying to run the code-push release command code-push release-cordova MyApp-Android android -m on my ionic-v3 project. But after Releasing update contents to CodePush: I am getting the below error:
[Error] sdk.isAuthenticated(...).then(...).then(...).then(...).finally is not a function
I also tried installing the latest version of the code-push plugin but got the same error.
Project Details
Android target SDK Version: 30
ionic info:
cli packages: (C:\Users\CGauns\AppData\Roaming\nvm\v8.9.4\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.9
Cordova Platforms : android 8.0.0
Ionic Framework : ionic-angular 3.9.2
System:
Node : v8.9.4
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : C:\Users\CGauns\AppData\Local\ANDROID\sdk;C:\Users\CGauns\AppData\Local\ANDROID\sdk\build-tools;C:\Users\CGauns\AppData\Local\ANDROID\sdk\tools;C:\Users\CGauns\AppData\Local\ANDROID\sdk\platform-tools;C:\Users\CGauns\AppData\Local\ANDROID\sdk\tools\bin;
Misc:
backend : pro
1 post - 1 participant
I updated my project from ionic 4 to 6 and after fixing everything. not able to create a new page using ionic generate page
but it shows an error
An unhandled exception occurred: Package
"@ionic/cordova-builders" was found but does not support schematics.
unable to figure out the issue.
1 post - 1 participant
0
i want to upload a excel file and read it using ionic-angular , i try with this code but it doesn’t work for ionic app its just work for browser i dont know why ?
i want to read it and get a value from it and it doesn’t work in ionic app (android )
if there is any plugin for excel file help me
this is my code
<ion-input #inputFile id="input-file" type="file" (change)="excelRead($event)" multiple></ion-input>
public excelRead(e :any ){
let fileReaded :any ;
fileReaded = e.target.files[0];
let type = e.target.files[0].name.split('.').pop();
console.log(fileReaded.name)
const schema = {
'Material' :{
prop : 'material',
type : String ,
required : false
} ,
'Description' :{
prop : 'description',
type : String ,
required : false
} ,
'Emplacement' :{
prop : 'emplacement',
type : String ,
required : false
} ,
'Physique' :{
prop : 'physique',
type : Number ,
required : false
} ,
'Sap' :{
prop : 'sap',
type : Number ,
required : false
} ,
'Ecart' :{
prop : 'ecart',
type : Number ,
required : false
} ,
'Cagette' :{
prop : 'cagette',
type : String ,
required : false
} ,
};
readXlsxFile(fileReaded, {schema}).then((data) =>{
console.log("message1")
if( data.rows){
for (let i of data.rows){
console.log("message2")
this.inventaireTab.push(i);
}
}
console.log("message3")
console.log(this.inventaireTab)
for (let i = 0; i < this.inventaireTab.length; i++) {
this.quantite.push(this.inventaireTab[i].physique)
}
console.log(this.quantite)
}
)
}
if you have any suggestion help me
1 post - 1 participant
I’m trying install Angular Universal into a Ionic project (but it’s using leaflet and other libraries and will be a lot of work… So, I saw this article about Universal vs Scully: Article about Angular Universal and Scully
The last information I had is: Scully and Ionic
There is a problem because Ionic web elements are not hydrated correctly in Scully.
Is there any progress ?
Is anyone using Scully with Ionic Angular ?
Thanks a lot of.
1 post - 1 participant
Vite, Rollup, and ESBuild — oh my!
As an added bonus, Framework v6 will be usable with tooling such as Vite, Rollup, and ESBuild, giving you even more options for building apps. This is something that developers have been asking us about for a while, so we are excited to roll this support out.
The blog post announcing Ionic V6 (see above) talked about the inclusion of support for Vite with Ionic. I cannot find any mention of Vite in the Ionic documentation. Is this capability actually available? Are there any instructions available for how to us Vite with Ionic?
1 post - 1 participant
Hi,
Ionic V5. I’m testing some ion-input like this in Angular:
<ion-input type="number" min="360" max="500" value="400" step="1"></ion-input>
According to ion-input V5 Docs (ion-input | Ionic Documentation) in Android there should be two up/down arrows but in my case only the number is displayed.
In the Docs the example is very simple:
<ion-input placeholder="placeholder" type="number"></ion-input>
Here my html code:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
{{msjTitulo}}
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<!-- Test Ion Input -->
<ion-input type="number" min="360" max="500" value="400" step="1"></ion-input>
<ion-list>
<ion-item *ngFor="let item of items">
<ion-icon slot="start" [name]="item.icon" [color]="item.color"></ion-icon>
<ion-label>
{{item.param}}
</ion-label>
</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar>
<div>{{ statusFoot }}</div>
</ion-toolbar>
</ion-footer>
What could be wrong?
1 post - 1 participant
I am getting below error when I am trying to run ionic cordova prepare android command on Mac.
ng run app:ionic-cordova-build --platform=android
An unhandled exception occurred: Project target does not exist.
See "/private/tmp/ng-ga2aoC/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.
ng run app:ionic-cordova-build --platform=android exited with exit code
127.
Re-running this command with the --verbose flag may provide more
information.
1 post - 1 participant
Hi guys.
I’m wanting to check if the time and date is in automatic on ios. I found some plugins made for ios I tried to use them more without success.
I also tried to use the diagnostic cordova plugin but it doesn’t check this Date and Time issue if it is activated or deactivated.
Here are the links I found and tried to do.
GitHub - andrerds/cordova-plugin-time-check: Plugin de checagem de tempo - Cordova (in use)
GitHub - 123erfasst/cordova-plugin-timesettings: 123Erfasst Plugin um zu erzwingen dass der Benutzer Automatische Zeit aktiviert hat
If anyone can help me, a solution, I would be grateful.
1 post - 1 participant
I would like a feature to enable the inclusion of the ion-picker component within the content of a page without the need to open it in a modal, I managed to implement this feature with ion-datetime but it only works with dates, years and months and I want to use ion-picker to create an ios-style select and only that with ion-picker I can create but it only opens in modal, is this feature currently possible or could it be developed?
I am currently using the following code in angular/ionic 6
home.page.html
<ion-content>
<ng-container >
<ion-button expand="block" (click)="showPickerController()">Show Picker Controller</ion-button>
<ion-list>
<ng-container *ngFor="let type of ['year']">
<ion-item slot="header">
<ion-label>ion-datetime</ion-label>
<ion-text slot="end"></ion-text>
</ion-item>
<ion-datetime
size="cover"
slot="content"
[presentation]="type"
>
</ion-datetime>
</ng-container>
</ion-list>
</ng-container>
</ion-content>
home.page.ts
import { Component } from '@angular/core';
import { PickerController, PickerOptions } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private pickerCtrl: PickerController) {}
async showPickerController() {
let opts: PickerOptions = {
buttons: [
{
text: 'Ok'
}
],
columns: [
{
name: 'category',
options: [
{ text: 'Dog', value: 'dog' },
{ text: 'Cat', value: 'cat' },
{ text: 'Fish', value: 'fish' },
{ text: 'Rabbit', value: 'rabbit' },
]
}
]
};
let picker = await this.pickerCtrl.create(opts);
picker.present();
picker.onDidDismiss().then(async data => {
console.log('dismiss');
});
}
}
1 post - 1 participant
i’m trynig to create input with Datetime in popover.
i’he tried this example but it doesn’t work correctly. i can’t even select date, there is no button to confirm selected date, also, no date displayed in input section???
what am i doing wrong ?? any help please ?
<!-- Datetime in popover with input -->
<ion-item>
<ion-input :value="date2" />
<ion-button fill="clear" id="open-date-input-2">
<ion-icon :icon="calendar" />
</ion-button>
<ion-popover trigger="open-date-input-2" :show-backdrop="false">
<ion-datetime
presentation="date"
@ionChange="(ev: DatetimeCustomEvent) => date2 = formatDate(ev.detail.value)"
/>
</ion-popover>
</ion-item>
<script lang="ts">
import { useRouter } from "vue-router";
import {
IonLabel,
IonItem,
IonContent,
IonSelect,
IonInput,
IonCard,
IonCardContent,
IonSelectOption,
IonPage,
IonDatetime,
IonPopover,
IonCol
} from "@ionic/vue";
import { format, parseISO } from 'date-fns';
import { defineComponent, ref } from "vue";
import { peopleOutline, handLeft, restaurant, film, book, female, male, chevronBack, flag, shareSocial,
heartOutline, heart, filter, build, close, add, calendar, language, addCircle} from 'ionicons/icons';
export default defineComponent({
name: "UsersSearchFilterPage",
components: {
IonCard,
IonCardContent,
IonLabel,
IonItem,
IonContent,
IonPage,
IonCol,
IonSelect,
IonInput,
IonPopover,
IonDatetime,
IonSelectOption,
},
setup() {
const customFormatter = (value: number) => `${value}%`;
const router = useRouter();
const customDatetime = ref();
const date1 = '';
const date2 = '';
const confirm = () => {
if (customDatetime.value === undefined) return;
customDatetime.value.$el.confirm();
};
const reset = () => {
if (customDatetime.value === undefined) return;
customDatetime.value.$el.reset();
};
const formatDate = (value: string) => {
return format(parseISO(value), 'MMM dd yyyy');
};
return {handLeft, peopleOutline, router, restaurant, film, book, female, male, chevronBack, flag, shareSocial, heartOutline, calendar,
add, build, heart, filter, close, language, customFormatter, customDatetime, formatDate};
}
});
</script>
1 post - 1 participant
this.video.nativeElement.currentTime in ionic not work please any solution !!!
1 post - 1 participant
Hello,
I developed my first iOS and macOS application (Electron) with Ionic 6 and Capacitor (http://cupfeed.app for the curious).
However I have a feature I would like to implement now: Cloud synchronization. And ideally via Apple Cloudkit.
I can’t find a Capacitor plugin allowing me to implement this. There is a Key/value system but it is not adapted to my use (only 1 MB of storage)
I tried via the JS version of CloudKit but without success. At least it worked more or less via the browser but the login does not work in Electron or in the iOS app. (and I’m not sure anyway that the user would stay logged in with this trick).
How do you implement this to access the iCloud user’s private database?
Thanks in advance
Translated with DeepL Translate: The world's most accurate translator (free version)
1 post - 1 participant
I am attempting to do something very simple yet it is causing me much pain.
I have an Ionic v5 Angular 12 application and have installed the Ionic-Native/PhotoLibrary plugin
I am using the Ionic-Native version as recommended by the plugin itself
Here is my code
import { PhotoLibrary } from '@ionic-native/photo-library/ngx';
constructor(private photoLibrary: PhotoLibrary) { }
const blob = new Blob(binaryData, { type: dataType });
this.file.writeFile(this.file.dataDirectory, attachment.name, blob, { replace: true }).then(() => {
console.log('file should be saved');
let libraryItem = this.photoLibrary.saveImage(this.file.dataDirectory + attachment.name, "RaceApp");
console.log('photo should be saved to album');
});
When running in android studio I see the following in the console
I/Capacitor/Console: File: https://localhost/main.js - Line 3687 - Msg: file should be saved
D/MediaScannerConnection: Scanned /storage/emulated/0/Pictures/RaceApp/2022-2-9-6.jpeg to content://media/external_primary/images/media/9512
E/AndroidRuntime: FATAL EXCEPTION: android.bg
Process: com.pyrix.racechat, PID: 10114
java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String org.json.JSONObject.toString()' on a null object reference
at org.apache.cordova.PluginResult.<init>(PluginResult.java:55)
at org.apache.cordova.CallbackContext.success(CallbackContext.java:70)
at com.terikon.cordova.photolibrary.PhotoLibrary$5$1.run(PhotoLibrary.java:212)
at com.terikon.cordova.photolibrary.PhotoLibraryService$2.run(PhotoLibraryService.java:214)
at com.terikon.cordova.photolibrary.PhotoLibraryService$5.onScanCompleted(PhotoLibraryService.java:579)
at android.media.MediaScannerConnection.runCallBack(MediaScannerConnection.java:211)
at android.media.MediaScannerConnection.lambda$scanFile$1(MediaScannerConnection.java:188)
at android.media.MediaScannerConnection$$ExternalSyntheticLambda0.run(Unknown Source:6)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:226)
at android.os.Looper.loop(Looper.java:313)
at android.os.HandlerThread.run(HandlerThread.java:67)
I do see that the RaceApp Album has been created and the photo is saved to that album. What I do not understand is why the application is crashing and that error is being shown.
1 post - 1 participant
Unable to get the ion-fab/ion-fab-button to fix to the bottom right of the page.
When I scroll it doesn’t stay fixed to the bottom right slot.
Any help would be greatly appreciated:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start"><ion-back-button defaultHref="home"></ion-back-button></ion-buttons>
<ion-title>Extra Shift</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="extraShiftPage" >
<ion-slides class="slideAsTab" pager="true" centeredSlides="true" *ngIf="extraShiftsByDay && extraShiftsByDay.length > 0">
<ion-slide *ngFor="let extraShiftByDay of extraShiftsByDay">
<ion-label class="slideHeader">{{extraShiftByDay.headerDate}}</ion-label>
<div *ngIf="extraShiftByDay.extraShifts && extraShiftByDay.extraShifts.length > 0">
<ion-card *ngFor="let extraShift of extraShiftByDay.extraShifts">
<ion-card-content>
<extra-shift-card [shift]="extraShift" (reload)="getExtraShifts()"></extra-shift-card>
</ion-card-content>
</ion-card>
</div>
<div *ngIf="extraShiftByDay && extraShiftByDay.extraShifts.length == 0">
<label class="noShiftsFound">No Shifts Found</label>
</div>
</ion-slide>
</ion-slides>
<div>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click)="postExtraShift()">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
<div *ngIf="extraShiftsByDay && extraShiftsByDay.length == 0">
<label class="noShiftsFound">No Shifts Found</label>
</div>
</ion-content>
1 post - 1 participant
i’m looking for a way to open ion-select onclick button. any help please
here’s what i tried so far
> <ion-icon :icon="addCircle" class="addcircle_icon" @click="toggleSelect = !toggleSelect" />
>
> <ion-select multiple="true" cancel-text="Annuler" ok-text="Confirmer" v-if="toggleSelect" v-model="selectedIndex">
>
> <ion-select-option value="bacon">Bacon</ion-select-option>
>
> <ion-select-option value="black olives">Black Olives</ion-select-option>
>
> <ion-select-option value="Extra cheese">Extra Cheese</ion-select-option>
>
> <ion-select-option value="Green peppers">Green Peppers</ion-select-option>
>
> <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
>
> <ion-select-option value="onions">Onions</ion-select-option>
>
> <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
>
> <ion-select-option value="pineapple">Pineapple</ion-select-option>
>
> <ion-select-option value="sausage">Sausage</ion-select-option>
>
> <ion-select-option value="Spinach">Spinach</ion-select-option>
>
> </ion-select>
>
>
>
> <script lang="ts">
>
> import { useRouter } from "vue-router";
>
> import {
>
> IonLabel,
>
> IonItem,
>
> IonContent,
>
> IonSelect,
>
> IonInput,
>
> IonCard,
>
> IonCardContent,
>
> IonSelectOption,
>
> IonPage,
>
> IonCol
>
> } from "@ionic/vue";
>
> import { defineComponent, ref} from "vue";
>
> import { peopleOutline, handLeft, restaurant, film, book, female, male, chevronBack, flag, shareSocial,
>
> heartOutline, heart, filter, build, close, add, calendar, language, addCircle} from 'ionicons/icons';
>
> export default defineComponent({
>
> name: "UsersSearchFilterPage",
>
> components: {
>
> IonCard,
>
> IonCardContent,
>
> IonLabel,
>
> IonItem,
>
> IonContent,
>
> IonPage,
>
> IonCol,
>
> IonSelect,
>
> IonInput,
>
> IonSelectOption,
>
> },
>
> setup() {
>
>
> const router = useRouter();
>
> const selectedIndex = ref("");
>
> const toggleSelect = ref(false);
>
> return {handLeft, peopleOutline, router, restaurant, film, book, female, male, chevronBack, flag, shareSocial, heartOutline, calendar,
>
> add, build, heart, filter, close, language, addCircle, selectedIndex, toggleSelect};
>
> }
>
> });
>
> </script>
1 post - 1 participant
I’m building an application to read epub and I need to customize the popup toolbar that appears when selecting a text. I want to leave only the ‘copy’ option and add an option that calls a javascript function. It’s for Android with ionic-react.
Can someone help me?
1 post - 1 participant
Hi, any help would be greatly appreciated. I am also willing to pay for a screen share session with someone who is familiar with this bluetooth library.
ble.startNotification not working for me 
I am using this library: import { BLE } from ‘@awesome-cordova-plugins/ble/ngx’;
I am able to connect to my bluetooth remote and to get back device info. But the startNotification call never seems to run. I am using current angular and ionic versions. I am trying to listen to button clicks on the remote. I am not sure what values to use for the service and characteristic that would correspond to one of the buttons on my bluetooth remote, the two values listed in the startNotification call are my best guess.
this.ble.connect(this.deviceId).subscribe(results => {
this.tempOutput = ‘connected to remote’; // this works
this.ble.startNotification(this.deviceId, ‘1812’, ‘2a4e’).subscribe(buffer => {
this.tempOutput = ‘subscribe’; // this does NOT work
});
});
I have tried various methods of formatting what startNotification returns but nothing comes back:
// this.tempOutput = String.fromCharCode.apply(null, new Uint8Array(buffer));
Here is the device output from the connect function:
{
“name”: “AB Shutter3”,
“id”: “2A:07:98:10:40:05”,
“services”: [
“1801”,
“1800”,
“180a”,
“1812”,
“180f”
],
“characteristics”: [
{
“service”: “1801”,
“characteristic”: “2a05”,
“properties”: [
“Indicate”
],
“descriptors”: [
{
“uuid”: “2902”
}
]
},
{
“service”: “1800”,
“characteristic”: “2a00”,
“properties”: [
“Read”
]
},
{
“service”: “1800”,
“characteristic”: “2a01”,
“properties”: [
“Read”
]
},
{
“service”: “1800”,
“characteristic”: “2a04”,
“properties”: [
“Read”
]
},
{
“service”: “180a”,
“characteristic”: “2a50”,
“properties”: [
“Read”
]
},
{
“service”: “1812”,
“characteristic”: “2a4e”,
“properties”: [
“Read”,
“WriteWithoutResponse”
]
},
{
“service”: “1812”,
“characteristic”: “2a4d”,
“properties”: [
“Read”,
“Notify”
],
“descriptors”: [
{
“uuid”: “2902”
},
{
“uuid”: “2908”
}
]
},
{
“service”: “1812”,
“characteristic”: “2a4d”,
“properties”: [
“Read”,
“Notify”
],
“descriptors”: [
{
“uuid”: “2902”
},
{
“uuid”: “2908”
}
]
},
{
“service”: “1812”,
“characteristic”: “2a4b”,
“properties”: [
“Read”
]
},
{
“service”: “1812”,
“characteristic”: “2a4a”,
“properties”: [
“Read”
]
},
{
“service”: “1812”,
“characteristic”: “2a4c”,
“properties”: [
“WriteWithoutResponse”
]
},
{
“service”: “180f”,
“characteristic”: “2a19”,
“properties”: [
“Read”,
“Notify”
],
“descriptors”: [
{
“uuid”: “2902”
}
]
}
]
}
1 post - 1 participant