Hello, In an ionic-angular capacitor application how to hash and store password in local storage for offline feature.
Is there any npm plugin which can be used for password hashing?
And which one is best? whether to hash password or encrypt password?
1 post - 1 participant
Hello,
as suggested by ionic vs extension i’ve tried to move from webpack to esbuild but now my app doesn’t work anymore: if I run “ionic serve” i get a lot of errors in the console
like this:
chunk-VIBOU7HO.js?v=f73f4152:50 ERROR Error: Dynamic require of “./main.module-5MY3Q5GX.js” is not supported
or
TypeError: Cannot read properties of undefined (reading ‘isProxied’)
and
The glob pattern import(“./**/.entry.js”) did not match any files [empty-glob]
do I need to fix something somewhere?
thank you.
1 post - 1 participant
I want to write api test cases for various business use cases, for which I need a list of api calls done by my ionic apps, so that I can recreate them in postman. I don’t want to scan and filter log files. Is there any automated way to do so ? Some plugin or extension ?
One way is to look manually in all services files and list the apis but I was looking for a better way to do this because there are a lot of apps, I don’t prefer to do it maunally. All inputs are welcome !
1 post - 1 participant
I have an Ionic 7 App . Main screen gets info about news,events from an API every time is started, using local cache.
On Android it works well, but on iPhone 12 or higher, it stops working SOMETIMES after restarting: menu disappears, blank screen… it seems all data is lost. Sometimes works for several days, sometimes stops working in two hours…
Any ideas?
{
...
"private": true,
"dependencies": {
"@angular/animations": "^17.0.2",
"@angular/cdk": "^17.3.2",
"@angular/common": "^17.0.2",
"@angular/compiler": "^17.0.2",
"@angular/core": "^17.0.2",
"@angular/forms": "^17.0.2",
"@angular/platform-browser": "^17.0.2",
"@angular/platform-browser-dynamic": "^17.0.2",
"@angular/router": "^17.0.2",
"@awesome-cordova-plugins/app-version": "^6.6.0",
"@awesome-cordova-plugins/badge": "^6.6.0",
"@awesome-cordova-plugins/barcode-scanner": "^6.6.0",
"@awesome-cordova-plugins/camera": "^6.6.0",
"@awesome-cordova-plugins/file": "^6.6.0",
"@awesome-cordova-plugins/file-transfer": "^6.6.0",
"@awesome-cordova-plugins/geolocation": "^6.6.0",
"@awesome-cordova-plugins/insomnia": "^6.6.0",
"@awesome-cordova-plugins/launch-navigator": "^6.6.0",
"@awesome-cordova-plugins/photo-viewer": "^6.6.0",
"@awesome-cordova-plugins/social-sharing": "^6.6.0",
"@awesome-cordova-plugins/splash-screen": "^6.6.0",
"@awesome-cordova-plugins/sqlite": "^6.6.0",
"@awesome-cordova-plugins/sqlite-porter": "^6.6.0",
"@capacitor/android": "^5.7.4",
"@capacitor/app": "^5.0.7",
"@capacitor/camera": "^5.0.9",
"@capacitor/core": "^5.7.4",
"@capacitor/device": "^5.0.7",
"@capacitor/haptics": "^5.0.7",
"@capacitor/ios": "^5.7.4",
"@capacitor/keyboard": "^5.0.8",
"@capacitor/network": "^5.0.7",
"@capacitor/preferences": "^5.0.7",
"@capacitor/splash-screen": "^5.0.7",
"@capacitor/status-bar": "^5.0.7",
"@ionic/angular": "^7.0.0",
"@ionic/storage-angular": "^4.0.0",
"@techiediaries/ngx-qrcode": "^9.1.0",
"angularx-qrcode": "^17.0.0",
"com-sarriaroman-photoviewer": "^1.3.0",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-badge": "^0.8.9",
"cordova-plugin-camera": "^7.0.0",
"cordova-plugin-dialog": "^0.0.1",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-file": "^8.0.1",
"cordova-plugin-file-transfer": "^2.0.0",
"cordova-plugin-geolocation": "^5.0.0",
"cordova-plugin-insomnia": "^4.3.0",
"cordova-plugin-transfer": "^1.0.8",
"cordova-plugin-x-socialsharing": "^6.0.4",
"cordova-sqlite-storage": "^6.1.0",
"es6-promise-plugin": "^4.2.2",
"ionic-cache": "^6.0.3",
"ionicons": "^7.0.0",
"ngx-ionic-image-viewer": "^0.7.5",
"onesignal-cordova-plugin": "^3.3.2",
"rxjs": "~7.8.0",
"swiper": "^11.1.0",
"tslib": "^2.3.0",
"uk.co.workingedge.cordova.plugin.sqliteporter": "^1.1.2",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.6",
"zone.js": "^0.14.4"
},
...
}
1 post - 1 participant
I am trying to use the below snippet of code to have a one single file exported (and try avoiding lazy loading). All seems to work as it should, but the code set to the globalScript key does not seem to be executed.
I am not able to understand if this is intended, a bag, or a mistake in my setup.
Has anyone faced the same problem? or any idea how to overtake this issue?
…and, more in general, is this approach a good one to avoid lazy loading?
{
type: "dist-custom-elements",
generateTypeDeclarations: true,
includeGlobalScripts: true,
customElementsExportBehavior: "single-export-module",
minify: false,
},
reactOutputTarget({
componentCorePackage: "@my-lib/stencil-library/dist/",
proxiesFile: "../react-library/lib/components/stencil-generated/index.ts",
includeImportCustomElements: true,
includeDefineCustomElements: undefined,
}),
1 post - 1 participant
I have looked through npmjs and the official capacitor documentation and I cannot find an updated plugin that will work for Android Biometric login and also GeoLocation lookup by address
I have a requirement to make sure that users can only check into work when they are at least 500 yards away from their work location. So the easiest way would be to enter in the address of the location to verify they are there correct? In any case I need a plugin that does this type of lookup.
Then of course for login I need an updated version for Capacitor for Biometric handling.
Can someone please help?
1 post - 1 participant
Hello,
I have some simple html files which should be my app pages.
I tried linking between them simply with a <a> link-
This works fine in the browser, on my phone however, I reveive a “Page not found error”
Can someone give me a hint what I am doing wrong?
All html files inside /src. Links look like <a href="about.html">.
Thanks and kind regards
Andreas
1 post - 1 participant
Hello, I just set up the IONIC environment on a MAC 14 Sonoma and when creating an app from scratch:
ionic start my-app sidemenu
angular
standalone
…the installation does not finish, generating the following error output:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
**npm ERR! **
npm ERR! While resolving: ionic-app-base@0.0.0
npm ERR! Found: zone.js@undefined
npm ERR! node_modules/zone.js
npm ERR! zone.js@“~0.14.2” from the root project
**npm ERR! **
npm ERR! Could not resolve dependency:
npm ERR! peer zone.js@“~0.14.0” from @angular/core@17.3.4
npm ERR! node_modules/@angular/core
npm ERR! @angular/core@“^17.0.2” from the root project
npm ERR! peer @angular/core@“17.3.4” from @angular/common@17.3.4
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@“^17.0.2” from the root project
**npm ERR! **
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
**npm ERR! **
**npm ERR! **
npm ERR! For a full report see:
The versions of node, npm and ionics are:
juancarlos@MacBook-Pro-de-Juan ws % ionic --version
7.2.0
juancarlos@MacBook-Pro-de-Juan ws % npm --version
10.5.0
juancarlos@MacBook-Pro-de-Juan ws % node --version
v20.12.2
juancarlos@MacBook-Pro-de-Juan ws %
Any ideas to solve these dependency problems?
Thank you very much in advance.
1 post - 1 participant
Been searching for a way to submit a feature request to add a helperText property to the ion-searchbar. Can someone point m to the place I can submit the request?
1 post - 1 participant
I’ve a new pwa app created with ionic and angular (standalone).
Ionic 7.1.1 - Angular 17.0.2
If I run it with ionic serve it’s all ok. If I run it with http-server ( http-server -c-1 www) i’ve css problems.
For test i’ve created a new class in global.scss.
I can see the class in style.css created with “build --prod”.
Inspecting the button I see the class but it doesn’t apply it. Does anyone have any idea how to figure out the problem?
Thanks!
Monica
1 post - 1 participant
Using Capacitor 5.2.3 with Camera plugin 5.0.7.
if (cameraPermission.photos === 'limited') {
const images = await Camera.getLimitedLibraryPhotos();
}
For this code when I am trying to get selected photos for limited photo access the app is crashing if the selected photos are more than 30.
Any ideas on what I can do here ?
1 post - 1 participant
Originally published at: https://ionic.io/blog/ionic-8-is-here
What’s new in Ionic 8? Enhancements to theming, accessibility, revised iOS designs, a new Picker experience, and a new password toggle component.
1 post - 1 participant
I have a Capacitor 5/Angular app that seems to have an issue with using intervals and creating duplicate submissions in iOS.
The idea is that when a user is in patchy cell service they can report a wildfire, which gets saved to storage if the user is offline. The app then pings the server every 3 minutes using an rxjs interval and the Capawesome background task API to see if the user is online and if so, the form will be submitted to the endpoint.
I am storing a submissionID in local storage with a check which rejects duplicate submissions without issue in the browser and on Android. But somehow on iOS this check is failing and duplicates with the same submissionID are getting submitted to the endpoint.
I do not think this is an issue with the Capawesome API as I get duplicates on iOS if I remove the background task and let the interval run in the foreground. Note that I am using the Capawesome API as it seems that just the Geolocation and Notifications API are supported in the new Capacitor background-runner API which do not seem like feasible options for my goal. I also do not think it is an issue with the type of storage being used as I have tried ionic storage, local storage and Capacitor Preferences to store and fetch the data. I have also used both setInterval function and rxjs interval which both yielded the same results. Please let me know if there is a bug in Capacitor or something wrong in my code.
rof-title-page.component.ts
ngOnInit(): void {
if (this.reportOfFirePage.currentPage.instance.id === 'first-page') {
App.removeAllListeners();
// run background task
(async () => {
await this.backgroundListener();
})();
}
}
async backgroundListener() {
App.addListener('appStateChange', async ({ isActive }) => {
if (isActive) {
return;
}
// The app state has been changed to inactive.
// Start the background task by calling `beforeExit`.
const taskId = await BackgroundTask.beforeExit(async () => {
const self = this;
if(!this.intervalRef) {
this.intervalRef = interval(30000).subscribe(() => {
self.checkStoredRoF();
});
}
BackgroundTask.finish({ taskId });
});
});
}
async checkStoredRoF() {
const self = this;
// first check do 24 hour check in storage and remove offline RoF if timeframe has elapsed
await this.commonUtilityService.removeInvalidOfflineRoF();
// check if the app is online and if so, check for saved offline RoF to be submitted
await this.commonUtilityService.checkOnlineStatus().then(async (result) => {
if (result) {
await this.reportOfFireService.syncDataWithServer().then(response => {
if(response) self?.intervalRef?.unsubscribe();
});
};
});
}
report-of-fire-service.ts
async syncDataWithServer() {
let dataSynced = false;
let submissionID = null;
let duplicateStored = false;
let submissionIdList = null;
let offlineReport = null;
try {
// Fetch and submit locally stored data
offlineReport = this.storageService.getData('offlineReportData')
submissionIdList = this.storageService.getData('submissionIDList')
if (offlineReport) {
// Check for duplicate, reject if submissionID has already been stored
const offlineJson = JSON.parse(offlineReport)
if(offlineJson?.resource) {
const resourceJson = JSON.parse(offlineJson.resource)
submissionID = resourceJson?.submissionID
if (submissionID && submissionIdList?.includes(submissionID)) {
duplicateStored = true;
}
}
// Reject duplicate if submissionID has already been stored
if(duplicateStored) return true;
// Send the report to the server
const response =
await this.submitOfflineReportToServer(offlineReport).then(async response => {
if (response.success) {
dataSynced = true;
// Remove the locally stored data if sync is successful
this.storageService.removeData('offlineReportData');
// store submissionID for duplicate check
if(submissionID) {
submissionIdList = submissionIdList ? submissionIdList + ", " + submissionID : submissionID;
this.storageService.saveData('submissionIDList', submissionIdList)
}
App.removeAllListeners();
}
});
}
} catch (error) {
console.error('Sync failed:', error);
}
return dataSynced;
}
async submitOfflineReportToServer(offlineReport?): Promise<any> {
// retrieve the offline RoF from the device's storage and convert to FormData for submission
// images will already to converted to base64 string from initial submission
const rofUrl = this.appConfigService.getConfig().rest['fire-report-api'];
const rofJson = JSON.parse(offlineReport);
const resource = rofJson.resource;
const image1 = rofJson.image1;
const image2 = rofJson.image2;
const image3 = rofJson.image3;
const formData = new FormData();
if (resource) {
formData.append('resource', resource);
}
if (image1) {
formData.append('image1', image1);
}
if (image2) {
formData.append('image2', image2);
}
if (image3) {
formData.append('image3', image3);
}
try {
// Make an HTTP POST request to your server's API endpoint
const response = await fetch(rofUrl, {
method: 'POST',
body: formData,
});
if (response.ok || response.status == 200) {
// Remove the locally stored data if sync is successful
this.storageService.removeData('offlineReportData');
App.removeAllListeners();
// The server successfully processed the report
return { success: true, message: 'Report submitted successfully' };
} else {
// The server encountered an error
return { success: false, message: JSON.stringify(response) };
}
} catch (error) {
// An error occurred during the HTTP request
return {
success: false,
message: 'An error occurred while submitting the report',
};
}
}
}
async submitToStorage(formData: FormData) {
const object = {};
formData.forEach((value, key) => (object[key] = value));
const json = JSON.stringify(object);
const data = this.storageService.getData('offlineReportData')
if (data == json) {
return;
} else this.storageService.saveData('offlineReportData', json);
}
local-storage-service
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class LocalStorageService {
public saveData(key: string, value: string) {
localStorage.setItem(key, value);
}
public getData(key: string) {
return localStorage.getItem(key);
}
public removeData(key: string) {
localStorage.removeItem(key);
}
public clearData() {
localStorage.clear();
}
}
1 post - 1 participant
Mr. Business Magazine is a dynamic and inspirational platform catering to business enthusiasts and leaders worldwide. Personifying the entrepreneurial spirit, it showcases the success stories of global businesses and entrepreneurs.
1 post - 1 participant
The Enterprise World, is a business magazine, a platform for all the master business minds to share their stories of success, and the loopholes they encountered to become the overnight stars they are now of the enterprise world.
1 post - 1 participant
in Mongolian language month names too long for example (нэгдүгээр сар, хоёрдугаар сар) etc. i want (1-р сар, 2-р сар) etc
1 post - 1 participant
I am probably doing it wrong but since upgrading to Angular Ionic 8 autofill password no longer working when username entered since converting to the new format. How would i get this to work? Thanks in advance.
My Code
<ion-input class="login-input" label="Username" label-placement="floating" fill="outline" autocomplete="true" [(ngModel)]="username"></ion-input>
<ion-input class="login-input" label="Password" label-placement="floating" fill="outline" autocomplete="true" [disabled]="isAuthenticating||isInit" type="string" [(ngModel)]="password">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
1 post - 1 participant
Hi everyone!
I’m trying to install Vitest on a newly created Ionic-angular project and I’m getting into troubles. I followed this article to install Vitest :
But ng test ends with this error:
Cannot use import statement outside a module
Module /node_modules/.pnpm/@ionic+core@7.8.4/node_modules/@ionic/core/components/ion-back-button.js:4
seems to be an ES Module but shipped in a CommonJS package.
You might want to create an issue to the package "@ionic/core" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.
As it is suggested, I have updated the vite.config.mts file :
export default defineConfig(({ mode }) => {
return {
plugins: [angular()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['src/test-setup.ts'],
include: ['**/*.spec.ts'],
reporters: ['default'],
server: {
deps: {
inline: ["@ionic/core"]
}
}
},
define: {
'import.meta.vitest': mode !== 'production',
},
};
});
but ng test ends with the same error.
Has anyone managed to make it work ?
1 post - 1 participant
Hello,
I have a problem with my ionic 7 app on iOS.
Sometimes, when I have it in memory and I go to use other apps, when I return the app does not work correctly.
It seems that the system takes it out of memory to optimize resources and when it tries to recover it, it does not have the information of the view in which it was.
I understand that for these cases, I should save the state of the app, but I don’t know where to save/recover that state or how to save it.
Any ideas?
Greetings
2 posts - 2 participants