I have ion-picker inside ion-modal window and I was wondering if it is possible to show more than 5 options at a time. Also is it possible wrap lines if there is a long text as option?
Thank’s for any response
1 post - 1 participant
↧
How to make ion-picker fill up the ion-modal
↧
Light mode ion-input of type "date" with empty value displayed in black color on Safari
Safari displays the current date as default value when passing no value to a input type="date". This is the default behavior.
Using ion-input type="date" with no value in light mode in Safari, it displays the current date in black color, making it look like as if it already has a valid value, even though it is empty.
When using a native input type="date" Safari also displays the current date as default value, but in gray color and appears like a normal placeholder.
Stackblitz example: https://angular-o5ggmw.stackblitz.io
I haven’t found a way to style the placeholder of the ion-input type="date" field. So far, nothing seems to work.
ion-input {
--placeholder-color: blue;
--placeholder-opacity: 0.25;
}
This works for a ion-input type="text" field, but not for the date field.
Any ideas?
2 posts - 2 participants
↧
↧
Error al hacer npm install en un proyecto de angular con ionic
Esta es mi versión de angular + otra información
Angular CLI: 18.0.6
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64
Angular: undefined
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1800.6 (cli-only)
@angular-devkit/core 18.0.6 (cli-only)
@angular-devkit/schematics 18.0.6 (cli-only)
@schematics/angular 18.0.6 (cli-only)
typescript 5.5.2
zone.js 0.14.7
ionic version 7.2.0
Este es lo que me arroja en consola
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm ERR! code 1
npm ERR! path C:\Users\david_\Documents\david\project\app\node_modules\nx
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node ./bin/post-install
npm ERR! C:\Users\david_\Documents\david\project\app\node_modules\nx\src\native\native-bindings.js:244
npm ERR! throw loadError
npm ERR! ^
npm ERR!
npm ERR! Error: No se puede encontrar el módulo especificado.
npm ERR! \\?\C:\Users\david_\AppData\Local\Temp\nx-native-file-cache-c13a611\19.3.2-nx.win32-x64-msvc.node
npm ERR! at Module._extensions..node (node:internal/modules/cjs/loader:1473:18)
npm ERR! at Module.load (node:internal/modules/cjs/loader:1207:32)
npm ERR! at Module._load (node:internal/modules/cjs/loader:1023:12)
npm ERR! at Module._load (C:\Users\david_\Documents\david\project\app\node_modules\nx\src\native\index.js:60:27)
npm ERR! at Module.require (node:internal/modules/cjs/loader:1235:19)
npm ERR! at require (node:internal/modules/helpers:176:18)
npm ERR! at Object.<anonymous> (C:\Users\david_\Documents\david\project\app\node_modules\nx\src\native\native-bindings.js:66:29)
npm ERR! at Module._compile (node:internal/modules/cjs/loader:1376:14)
npm ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
npm ERR! at Module.load (node:internal/modules/cjs/loader:1207:32) {
npm ERR! code: 'ERR_DLOPEN_FAILED'
npm ERR! }
npm ERR!
npm ERR! Node.js v20.11.1
npm ERR! A complete log of this run can be found in: C:\Users\david_\AppData\Local\npm-cache\_logs\2024-06-27T14_10_32_146Z-debug-0.log
Este es el package.json
{
"name": "project",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/fire": "^18.0.1",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"@capacitor/app": "6.0.0",
"@capacitor/core": "6.1.0",
"@capacitor/haptics": "6.0.0",
"@capacitor/keyboard": "6.0.1",
"@capacitor/status-bar": "6.0.0",
"@google/generative-ai": "^0.13.0",
"@ionic/angular": "^8.0.0",
"autoprefixer": "^10.4.19",
"firebase": "^10.12.2",
"ionicons": "^7.2.1",
"postcss": "^8.4.38",
"rxjs": "~7.8.0",
"tailwindcss": "^3.4.4",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.0.0",
"@angular-eslint/builder": "^18.0.0",
"@angular-eslint/eslint-plugin": "^18.0.0",
"@angular-eslint/eslint-plugin-template": "^18.0.0",
"@angular-eslint/schematics": "^18.0.0",
"@angular-eslint/template-parser": "^18.0.0",
"@angular/cli": "^18.0.0",
"@angular/compiler-cli": "^18.0.0",
"@angular/language-service": "^18.0.0",
"@capacitor/cli": "6.1.0",
"@ionic/angular-toolkit": "^11.0.1",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.57.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsdoc": "^48.2.1",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~5.1.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.0"
},
"description": "An Ionic project"
}
Gracias de antemano.
Ya valide
Eliminando el directorio node_modules
rm -rf node_modules
Limpiando el cache de npm
npm cache clean --force
Instalando las dependencias nuevamente
npm install --force
También borrando package-lock.json, pero ya no se que mas se podrá validar, lo que no tengo actualizado es el cli de firestore aqui en este proyecto tengo “@angular/fire”: “^18.0.1”, y en mi ordenador tengo la version 17, pero nose si podra ser algo de eso.
Advertencias de obsolescencia: @humanwhocodes/config-array@0.11.14: Usar @eslint/config-array en su lugar
rimraf@3.0.2: Las versiones de Rimraf anteriores a la v4 ya no son compatibles
@humanwhocodes/object-schema@2.0.3: Usar @eslint/object-schema en su lugar
glob@7.2.3: Las versiones globales anteriores a la v9 ya no son compatibles
Hasta probe formateando la notebook, nadie pudo darme la solución, ni pude crear una nueva aplicacion ni pude hacer npm de una aplicacion, ya nose que mas probar
1 post - 1 participant
↧
Error when doing npm install in an angular project with ionic
↧
Footer problem with Chrome (Android)
Hello! We discovered a problem with the ion-content fullscreen property. It manifested on Android devices that use Google Chrome. When you apply fullscreen to the content component it sets the css properties –offset-top and –offset-bottom. This makes chrome hide address bar. When the address bar is being translated the footer starts moving upwards with the bar. I found out that reducing the --offset-top and --offset-bottom by one pixel prevents Chrome from hiding the address bar. The reason we need fullscreen is because we hide the header and footer when scrolling downwards.
I found the same issue on the official ionic docs when using the fullscreen property.
Is the ionic team aware of this problem, and will it be fixed? For now I will disable fullscreen on Android Web.
1 post - 1 participant
↧
↧
Trouble Integrating Native Plugins with Ionic and Capacitor
Hi everyone,
I’m currently working on a cross-platform mobile app using Ionic and Capacitor, and I’ve hit a bit of a roadblock with integrating native plugins.
Here’s the setup:
- Ionic Framework version: 8.2.2
- Capacitor version: 5.1.0
- Development Environment: Windows 10, Visual Studio Code
The specific issue I’m encountering is with the Camera plugin. I followed the documentation and added the necessary imports and configurations, but when I attempt to take a picture, the app crashes without any clear error message. Here’s a snippet of the code I’m using:
import { Camera, CameraResultType } from '@capacitor/camera';
const takePicture = async () => {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
console.log('Image URI:', image.webPath);
};
takePicture();
I’ve checked the Android and iOS configurations, and everything seems to be in order according to the official documentation.
Things I’ve tried so far:
- Reinstalled the Camera plugin and Capacitor.
- Ensured all permissions are correctly set in
AndroidManifest.xmlandInfo.plist. - Cleaned and rebuilt the project multiple times.
Despite these efforts, the issue persists. Has anyone faced a similar problem or have any insights on what might be going wrong? Any tips on debugging native plugin issues in Ionic/Capacitor would also be greatly appreciated!
Thanks in advance for your help!
Emily
2 posts - 2 participants
↧
Tests not working upgrading node version 14 -> 16+
I have been building an app since Ionic/react v5. I updated to Ionic/react and the CLI required I use node v16 or higher. Unfortunately when I did the upgrade I noticed that my existing Jest/React Testing Library tests that all passed when I was using node 14 started to fail. It takes FOREVER to run my tests on node v16 and they fail with weird issues like:
var evt = document.createEvent('Event');
^
TypeError: Cannot read properties of null (reading 'createEvent')
Or weird timeout issues. I am absolutely stumped as to why my tests only fail on node v16 or higher, and I am reaching out to the internet for help.
Here is my package.json
{
"name": "",
"version": "0.0.1",
"private": true,
"dependencies": {
"@aws-amplify/ui-react": "^4.6.1",
"@aws-sdk/client-textract": "^3.131.0",
"@aws-sdk/s3-request-presigner": "^3.267.0",
"@capacitor-firebase/analytics": "^5.1.0",
"@capacitor-firebase/messaging": "^5.0.0",
"@capacitor-mlkit/barcode-scanning": "^5.1.0",
"@capacitor/android": "^5.0.0",
"@capacitor/app": "^5.0.0",
"@capacitor/assets": "^1.0.10",
"@capacitor/camera": "^5.0.0",
"@capacitor/core": "^5.0.0",
"@capacitor/filesystem": "^5.1.1",
"@capacitor/haptics": "^5.0.0",
"@capacitor/ios": "^5.0.0",
"@capacitor/keyboard": "^5.0.0",
"@capacitor/local-notifications": "^5.0.0",
"@capacitor/preferences": "^5.0.0",
"@capacitor/share": "^5.0.6",
"@capacitor/status-bar": "^5.0.0",
"@capawesome/capacitor-app-update": "^5.0.0",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@ionic/react": "^6.4.1",
"@ionic/react-router": "^6.4.1",
"@ionic/react-test-utils": "^0.4.0",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.10.1",
"@stripe/react-stripe-js": "^1.16.4",
"@stripe/stripe-js": "^1.46.0",
"@tanstack/react-query": "^4.0.10",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^12.6.3",
"@types/jest": "^26.0.20",
"@types/node": "^12.19.15",
"@types/react": "^17",
"@types/react-dom": "^16.9.10",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"aws-amplify": "^5.2.1",
"aws-sdk": "^2.1278.0",
"axios": "^0.27.2",
"buffer": "^6.0.3",
"capacitor-rate-app": "^4.0.0",
"chrono-node": "^2.3.8",
"email-validator": "^2.0.4",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-prettier": "^4.2.1",
"firebase": "^9.23.0",
"html-react-parser": "^4.2.1",
"ionicons": "^5.4.0",
"luxon": "^3.0.1",
"msw": "^0.49.1",
"pdf-lib": "^1.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet-async": "^1.3.0",
"react-hook-form": "^7.34.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",
"stripe": "^11.6.0",
"swiper": "^9.4.1",
"typescript": "^4.1.3",
"use-callback-ref": "^1.3.0",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"start:android": "ionic caprun android --livereload --external",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons|swiper|ssr-window)/)' --watchAll=false",
"test:coverage": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons|swiper|ssr-window)/)' --coverage --watchAll=false",
"test:csvBuilder": "cd amplify/backend/function/csvBuilder/src && npm run test",
"test:email": "cd amplify/backend/function/email/src && npm run test",
"test:monitorTextractUsage": "cd amplify/backend/function/monitorTextractUsage/src && npm run test",
"test:moveReceiptsStorageTier": "cd amplify/backend/function/moveReceiptsStorageTier/src && npm run test",
"test:notifications": "cd amplify/backend/function/notifications/src && npm run test",
"test:successfulPayment": "cd amplify/backend/function/successfulPayment/src && npm run test",
"test:textractUsageReset": "cd amplify/backend/function/textractUsageReset/src && npm run test",
"test:stripePaymentIntent": "cd amplify/backend/function/stripePaymentIntent/src && npm run test",
"test:taxRefundCalculation": "cd amplify/backend/function/taxRefundCalculation/src && npm run test",
"test:lambdas": "npm run test:monitorTextractUsage && npm run test:textractUsageReset && npm run test:successfulPayment && npm run test:email && npm run test:stripePaymentIntent && npm run test:taxRefundCalculation && npm run test:csvBuilder && npm run test:notifications && npm run test:moveReceiptsStorageTier",
"test:all": "npm run test && npm run test:lambdas",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@capacitor/cli": "^5.0.0",
"@testing-library/dom": "^9.3.0",
"@types/luxon": "^3.0.0",
"@types/react-helmet": "^6.1.6",
"@types/uuid": "^8.3.4",
"eslint-config-prettier": "^8.5.0",
"jest-watch-typeahead": "^0.6.5",
"prettier": "^2.7.1"
},
"description": "An Ionic project",
"jest": {
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
},
"transformIgnorePatterns": [
"node_modules/(?!(@ionic|ionicons))"
]
}
}
2 posts - 1 participant
↧
Ionic Firebase Auth Error: Uncaught (in promise): FirebaseError: Firebase: Error (auth/internal-error)
Hello,
I have a problem with phone authentication on my iOS device. When I click on my RecaptchaVerifier container, I get this error:
Uncaught (in promise): FirebaseError: Firebase: Error (auth/internal-error). at@capacitor://localhost/main.52722ef3671ecb05.js:1:302281 create@capacitor://localhost/main.52722ef3671ecb05.js:1:302760 Ee@capacitor://localhost/main.52722ef3671ecb05.js:1:808106 @capacitor://localhost/main.52722ef3671ecb05.js:1:863588 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/main.52722ef3671ecb05.js:1:863349 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 render@capacitor://localhost/main.52722ef3671ecb05.js:1:862435 @capacitor://localhost/main.52722ef3671ecb05.js:1:862094 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/main.52722ef3671ecb05.js:1:864652 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/main.52722ef3671ecb05.js:1:864458 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 run@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:2004 @capacitor://localhost/main.52722ef3671ecb05.js:1:285236 @capacitor://localhost/main.52722ef3671ecb05.js:1:391388 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 @capacitor://localhost/1480.b05f7b47f5f0c77e.js:1:593 m@capacitor://localhost/main.52722ef3671ecb05.js:1:883073 We@capacitor://localhost/main.52722ef3671ecb05.js:1:883297 @capacitor://localhost/main.52722ef3671ecb05.js:1:883371 c@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:18436 @capacitor://localhost/main.52722ef3671ecb05.js:1:883241 Fv@capacitor://localhost/main.52722ef3671ecb05.js:1:543352 h@capacitor://localhost/main.52722ef3671ecb05.js:1:543520 @capacitor://localhost/main.52722ef3671ecb05.js:1:627862 onInvokeTask@capacitor://localhost/main.52722ef3671ecb05.js:1:514451 runTask@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:2625 invokeTask@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:8308 Z@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:20915 N@capacitor://localhost/polyfills.441dd4ca9dc0674f.js:1:21203
On the web (using ionic serve) it works perfectly, I can see my reCaptcha.
After investigating, on my device, Auth is fully functional, as is my AppCheck.
Here is my app.module.ts :
import { NgModule } from '@angular/core';
import { Capacitor } from '@capacitor/core'
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { getApp, initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth, initializeAuth, indexedDBLocalPersistence } from '@angular/fire/auth';
import { provideFirestore,getFirestore, initializeFirestore } from '@angular/fire/firestore';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule,
provideFirebaseApp(() =>
initializeApp(environment.firebase
)),
provideAppCheck(() =>
initializeAppCheck(undefined, {
provider: new ReCaptchaV3Provider(environment.reCaptchaSiteKey), isTokenAutoRefreshEnabled: true
})
),
provideAuth(() => {
if(Capacitor.isNativePlatform()){
return initializeAuth(getApp(), {
persistence: indexedDBLocalPersistence
});
} else {
return getAuth();
}
}),
provideFirestore(() => {
if(Capacitor.isNativePlatform()){
return initializeFirestore(getApp(), {
ignoreUndefinedProperties: true
});
} else {
return getFirestore();
}
}),
provideStorage(() => getStorage()),
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
bootstrap: [AppComponent],
})
export class AppModule {}
And here is my capacitor.config.ts :
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'myPersonalAppId',
appName: 'myPersonalAppName',
webDir: 'www',
server: {
androidScheme: 'https',
allowNavigation: ['*'],
}
};
export default config;
Please can someone help me I feel like I’ve already tried everything but nothing works…
Thanks!
3 posts - 2 participants
↧
Ionic ToastController not showing toast afet npm run build, Ionic 8 , Angular 18
The issue is: Using ToastController after build doesn’t shows the toast. Its working as expected with npm run serve , but not when builded . Seems never reaching the poing of console log console.log (‘Message Toast Service 3’); Ionic 8, with Angular 18 .
Also I discovered if add an option “optimization”: false for the build in angular.json its working correctly , but don’t think this is acceptable as solution
export class MessageToastService {
toastController = inject(ToastController);
async show(message?: string, duration: number = 3000,
error?: Error ) {
console.log ('Message Toast Service');
if (!message && error) {
message = error.message;
}
export class MessageToastService {
toastController = inject(ToastController);
async show(message?: string, duration: number = 3000,
error?: Error ) {
console.log ('Message Toast 1');
if (!message && error) {
message = error.message;
}
console.log ('Message Toast 2');
try {
const toast = await this.toastController.create({
message: message,
duration: duration,
position: 'bottom',
color: 'warning',
});
console.log ('Message Toast Service 3');
await toast.present();
} catch (e) {
console.log(e);
}
}
}
1 post - 1 participant
↧
↧
When debug async function in Angular project this is undefined
Hello. I’m running into an impediment.
When debugging my project with the Chrome Developer Tools, in asynchronous functions, the “this” context is undefined.
In non-asynchronous functions, the “this” context persists its value/context.
image:
I created a test project with ionic start to validate and it happens the same as in my personal project.
Image:
I am attaching evidence and I hope you can help me.
Thank you
1 post - 1 participant
↧
'ion-title' is not a known element:
please help i get this error:
‘ion-title’ is not a known element:
Error: src/app/outlook/outlook.page.html:8:3 - error NG8001: ‘ion-header’ is not a known element:
[ng] 1. If ‘ion-header’ is an Angular component, then verify that it is part of this module.
[ng] 2. If ‘ion-header’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
[ng]
[ng] 8
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] src/app/outlook/outlook.page.ts:5:16
[ng] 5 templateUrl: ‘./outlook.page.html’,
[ng] ~~~~~~~~~~~~~~~~~~~~~
[ng] Error occurs in the template of component OutlookPage.
[ng]
1 post - 1 participant
↧
Mix ionic Angular with vanilla JS
Hi,
Currently, I have an ionic vanilla js with capacitor project which is working fine. I need to integrate it with another ionic Angular capacitor project. Is it something feasible and how tough it is if possible?
I am a rookie ionic developer.
Thanks;
1 post - 1 participant
↧
Is it Possible to Implement Google Assistant into an Ionic App?
Hi everyone,
I’m currently working on an Ionic project and I’m interested in integrating Google Assistant functionality into my app. Specifically, I want to be able to open specific features of my app via voice commands using Google Assistant. Is it possible to implement Google Assistant functionality into an Ionic app?
Ex -“Ok Google search ABC in myapp”
1 post - 1 participant
↧
↧
Http to htpps
private apilUrl=‘https://3.109.60.88/scanIngredients/’
constructor( private http:HttpClient) { }
scanProduct(file:Blob):Observable{
const formData =new FormData();
formData.append(‘file’,file,‘ingredeints-list.jpg’);
return this.http.post(${this.apilUrl},formData)
}
this is my code when i am tring with http its working but when i am doing with https in browser gettting error also in androoid studio both http and https not working i am just scaning the image uploading is there any issue with my code let me know
4 posts - 2 participants
↧
There is a problem with the custom navigation animation
I wrote an animation for forward and backward navigation, forward navigation works fine, but I have problems with backward animation, I move the page through translateX and add opacity
, but as you can see in the picture for some reason there is a black background in the background during the animation, but after the animation is hung, the page is shown normally, I thought the problem in translate, but no, if leave only opacity, the problem remains, please tell me what the problem might be
My code
App.tsx
setupIonicReact({
navAnimation:navPageAnimate
})
const App: React.FC = () => {
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/tabs">
<Tabs/>
</Route>
<Route path='/a'>
<A/>
</Route>
<Route path='/b'>
<B/>
</Route>
<Route exact path="/">
<Redirect to="/tabs/tab2" />
</Route>
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
)
}
export default App
A page
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, useIonRouter } from '@ionic/react'
const A = () =>{
const navq = useIonRouter()
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>A</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<div onClick={()=>navq.push('/b',"forward")}>GO B</div>
</IonContent>
</IonPage>
)
}
export default A
B page
import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar, useIonRouter } from '@ionic/react'
const B = () =>{
const navq = useIonRouter()
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>B</IonTitle>
<IonButtons slot='start'>
<IonBackButton defaultHref='/a'></IonBackButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
B
</IonContent>
</IonPage>
)
}
export default B
CUSTOM ANIMATION FUNCTION
import { createAnimation } from "@ionic/react"
function navPageAnimate(baseEl: any, opts?: any) {
const animation = createAnimation()
if (opts.direction == "forward") {
const leaveMainPageAnimation = createAnimation()
.addElement(opts?.leavingEl)
.duration(200)
.fromTo("opacity", "1", "1")
.fromTo("transform", "translateX(0px)", "translateX(-100px)")
.beforeAddClass("overlay")
.afterRemoveClass("overlay")
const enterPageAnimation = createAnimation()
.addElement(opts?.enteringEl)
.duration(200)
.fromTo("opacity", "1", "1")
.fromTo("transform", "translateX(300px)", "translateX(0px)")
return animation.addAnimation([enterPageAnimation, leaveMainPageAnimation])
} else if (opts.direction == "back") {
const leaveChildPageAnimation = createAnimation()
.addElement(opts?.leavingEl)
.duration(1200)
.easing("ease-out")
.fromTo("opacity", "1", "0")
.fromTo("transform", "translateX(0px)", "translateX(300px)")
return createAnimation().addAnimation([leaveChildPageAnimation])
} else return createAnimation()
}
export { navPageAnimate }
versions
"dependencies": {
"@capacitor/android": "6.1.0",
"@capacitor/app": "6.0.0",
"@capacitor/core": "6.1.0",
"@capacitor/haptics": "6.0.0",
"@capacitor/keyboard": "6.0.1",
"@capacitor/status-bar": "6.0.0",
"@ionic/react": "^8.0.0",
"@ionic/react-router": "^8.0.0",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"ionicons": "^7.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"swiper": "^11.1.4",
"zustand": "^4.5.4"
},
2 posts - 1 participant
↧
Ionic v8 Angular v18 TS can't locate Ionic Component Types
I’m updating my Ionic v7 Angular v 17 app to v8/v18 and typescript can’t locate the Ionic types:
✘ [ERROR] TS2304: Cannot find name 'HTMLIonToastElement'. [plugin angular-compiler]
src/app/app.component.ts:155:25:
155 │ private _offlineToast: HTMLIonToastElement;
╵ ~~~~~~~~~~~~~~~~~~~
✘ [ERROR] TS2305: Module '"@ionic/angular/standalone"' has no exported member 'IonicConfig'. [plugin angular-compiler]
src/app/app.module.ts:32:7:
32 │ type IonicConfig,
╵ ~~~~~~~~~~~
✘ [ERROR] TS2307: Cannot find module '@ionic/core' or its corresponding type declarations. [plugin angular-compiler]
src/app/layouts/layout-edit/layout-edit.page.ts:13:35:
13 │ import { OverlayEventDetail } from '@ionic/core';
I looked at the upgrade docs and didn’t see anything about updating/installing any type libraries or changing imports.
Any thoughts?
2 posts - 1 participant
↧
Ionic 8 Angular 18: "The above dynamic import cannot be analyzed by Vite."
Upgrading to Angular 18 and still using:
"builder": "@angular-devkit/build-angular:application"
and I’m getting a vite warning on the Ionic internals:
730| return i[n];
731| }
732| return import("./".concat(a, ".entry.js").concat("")).then(function(e2) {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
733| {
734| cmpModules.set(a, e2);
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
Plugin: vite:import-analysis
File: /Users/saschwarz/dev/acmaster-upgrade/agility-course-master/.angular/cache/18.0.7/vite/deps/chunk-THRW7OZV.js?v=60485708
Looking in the file it is coming from ionic/core:
// node_modules/@ionic/core/dist/esm-es5/index-7a952e7a.js
var NAMESPACE = "ionic";
var BUILD = { allRenderFn: false, appendChildSlotFix: true, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: true, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: true, experimentalSlotFixes: true, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: true, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
var __defProp = Object.defineProperty;
var __export = function(e, t) {
for (var r in t)
__defProp(e, r, { get: t[r], enumerable: true });
};
var hostRefs = /* @__PURE__ */ new WeakMap();
var getHostRef = function(e) {
return hostRefs.get(e);
};
var registerHost = function(e, t) {
var r = { i: 0, $hostElement$: e, o: t, l: /* @__PURE__ */ new Map() };
{
r.u = new Promise(function(e2) {
return r.v = e2;
});
}
{
r.p = new Promise(function(e2) {
return r.h = e2;
});
e["s-p"] = [];
e["s-rc"] = [];
}
return hostRefs.set(e, r);
};
var isMemberInElement = function(e, t) {
return t in e;
};
var consoleError = function(e, t) {
return (0, console.error)(e, t);
};
var cmpModules = /* @__PURE__ */ new Map();
var loadModule = function(e, t, r) {
var n = e.m.replace(/-/g, "_");
var a = e.S;
if (!a) {
return void 0;
}
var i = cmpModules.get(a);
if (i) {
return i[n];
}
return import("./".concat(a, ".entry.js").concat("")).then(function(e2) {
{
cmpModules.set(a, e2);
}
return e2[n];
}, consoleError);
};
Is this warning expected?
1 post - 1 participant
↧
↧
Fail to migrate v5 to v6
Hi! I am following this tutorial to migrate v5 to v6. When using npx cap migrate, I received the following error:
√ Migrating build.gradle file. in 2.66ms
√ Replacing deprecated compileSdkVersion from build.gradle in 723.00μs
× Migrating variables.gradle file. - failed!
[error] Failed to migrate: TypeError: Invalid Version: ext {
minSdkVersion = 22
compileSdkVersion = 34
targetSdkVersion = 34
androidxActivityVersion = '
Has anyone encounter this issue before? Thank you.
1 post - 1 participant
↧
How to take an element outside the modal window
Hi, I need help, how can I move my div outside the content of the modal window, I need the block with the inscription to be slightly higher than my modal sheet, but at the same time follow the changes in the height of the modal window
My modal component
import './TicketModal.css'
interface TicketModalProps {
open: boolean
data: any
onClose: () => void
}
const TicketModal: FC<TicketModalProps> = ({ open, onClose, data }) => {
return (
<IonModal
id="ticket_modal"
isOpen={open}
onDidDismiss={onClose}
initialBreakpoint={0.75}
breakpoints={[0, 0.25, 0.5, 0.75]}
>
<IonContent id="ticket_content">
<div className="bg-red-700 z-50 absolute w-full top-[2px] left-0">CONTENT</div>
</IonContent>
</IonModal>
)
}
export default TicketModal
CSS
ion-modal#ticket_modal{
--width:80%;
--border-radius:20px;
overflow: visible !important;
}
ion-modal#ticket_modal::part(handle){
display: none;
}
ion-modal#ticket_modal::part(backdrop){
overflow: visible !important;
}
ion-modal#ticket_modal::part(content){
overflow: visible;
mask-image:
radial-gradient(ellipse 50px 45px at left 50% , #0000 30px, #000 0),
radial-gradient(ellipse 50px 45px at right 50%, #0000 30px, #000 0);
mask-composite: intersect;
}
ion-content#ticket_content{
--background: #ffdc1a;
}
1 post - 1 participant
↧
How to prevent all the childs inside an ion-item got disable when the ion-select (located in that ion-item) is disable programmatically?
In the HTML view I have this ion-list with ion-items
<form [formGroup]="myDetailsForm">
<ion-list class="ion-list-custom">
<ion-item class="validate-field" lines="full">
<ion-label
class="item-label avn-roboto-regular avn-label"
position="fixed"
id="state-label"
><ion-input value="State" readonly></ion-input></ion-label
>
<ion-select name="state" formControlName="state" id="state-select">
<ion-select-option *ngFor="let state of states" [value]="state.code"
>{{ state.code }}</ion-select-option
>
</ion-select>
<button
ion-button
clear
type="button"
(click)="showError('state', $event)"
class="field-error-img-btn"
item-right
*ngIf="myDetailsForm.get('state').invalid"
>
<img
class="field-error-img"
src="assets/imgs/card_error.png"
id="state-validate"
alt="State error"
/>
</button>
</ion-item>
</ion-list>
</form>
It is being declare like this
this.myDetailsForm = this.formBuilder.group({
state: [
{
value: this.accountDetails.mailingAddress.state,
disabled: this.anotherAddress || !this.isAddressEditable,
},
],
});
One of the ion-item has a ion-select which is being disable as the code below
this.myDetailsForm.get('state')?.disable();
When the ion-select is disabled, it disable the whole ion-item, which shows the ion-label disable as well.
How can I prevent this?
1 post - 1 participant
↧