2 posts - 1 participant

Read full topic

I’m working on a Design System developed with Stencil. Now I need to provide the output targets for different frameworks like Angular and React. I’ve noticed that all of the tutorials out there assumes that the AngularOutputTargets, for example, must be generated directly into an Angular library. Doing so means I need to publish my Angular (Wrapper) Library to NPM as well.

Isn’t there a way to include the output targets directly with the original package without the need for a wrapper library?

1 post - 1 participant

Read full topic

Hello everyone.

I’m trying to migrate from angular 16 to 17 but I’m running into a lot of problems.

I am passing the modules to standalone components, and I am running into errors with the ionic global styles and other calls mainly from ionic. I have changed the routes for the new directive, changed the start of the main.ts and app.config.

My question is, have they already migrated, did they do it successfully? Are they converting their modules to standalone or will they leave them in modules?

1 post - 1 participant

Read full topic

I’m getting the following warning on my Ionic + Vue login form.

[DOM] Password field is not contained in a form: (More info: Create Amazing Password Forms)

<input class="native-input sc-ion-input-md" id="ion-input-1" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-1" placeholder="" required="" spellcheck="false" type="password" aria-label="Password">

My Vue template looks something like this.

<ion-item lines="inset">
  <ion-label position="floating">Email</ion-label>
  <ion-input aria-label="Email" ref="emailInput" v-model="email" type="text" required></ion-input>
</ion-item>
<ion-item lines="inset">
  <ion-label position="floating">Password</ion-label>
  <ion-input aria-label="Password" ref="passwordInput" v-model="password" type="password" required></ion-input>
</ion-item>

Any ideas why I’m getting this warning? Do I need to wrap the ion-input elements inside a form tag?

1 post - 1 participant

Read full topic

Hello Ionic Community,

We are encountering some challenges with an app developed using Ionic and Angular. In our local development environment, the app operates smoothly when we use ng serve. However, we are facing issues after deploying it to a webserver.

We build the app using either ionic build --prod or ng build, and then deploy it to an HTTP server. Post-deployment, we are observing the following problems:

1. UI Breakage: The app’s header, which is visible in local testing, becomes hidden on the deployed version. The header still appears in the source code when inspected via Chrome.
2. JavaScript Error: On a specific page of the app, we encounter the following JavaScript error:

ERROR Error: Uncaught (in promise): TypeError: ve.getScrollElement is not a function

For context, we are using Angular version 16.0.0 and Ionic version 7.5.0.

Could anyone provide insights or suggest potential solutions for these issues? Any guidance on troubleshooting or resolving these problems would be greatly appreciated.

Thank you in advance for your assistance!

1 post - 1 participant

Read full topic

Good day

I am interesting in developing Ionic Apps using vanilla javascript. I have started using the CDN version and everything is going well-ish. Thanks to the ionic documentation Im able to see my way through.

It kinda funny that everything has to transpile to javascript, ie, react, vue and typescript yet there are very few sources of vanilla javascript sources available, I find it odd.

Anyway, please with due respect, I dont know TS, I dont know Angular and will learn Capacitor soon and are just interested in following this route for my use case. If you have any useful sources where I can get proper content, I would be glad.

At the moment I am having struggles with the ion-router, etc, I like the tabs-example for routing but the ion-router and ion-router-outlet documentation is not so informative. For example, what if I dont want to use a custom component on the ion-router example and use something like the ion-tabs example approach? Is that even possible? Well I always believe that nothing is impossible, knowing how could be an issue. Thus me asking.

If you can help and know your way around this topic, please let’s touch base and let’s talk.

Thank you so much.

1 post - 1 participant

Read full topic

Originally published at: Superapps for employers - Ionic Blog

Imagine that as you hire new employees, there is a single source of truth for all things onboarding. One place for setting up, training, and managing employees. Sound too good to be true? Thanks to superapps, a streamlined experience is possible.

1 post - 1 participant

Read full topic

Hi, I have an issue when compiling with the Appflow tool. It gives me the following error:

Shell command exited with exit status 126 instead of 0.
sh: 1: cap: Permission denied
unexpected token at 'sh: 1: cap: Permission denied

The thing is, I’ve only made a change in one of the Vue files, I haven’t updated anything or changed any other data. In fact, I’ve tried compiling a commit from a few days ago (03/11/2023) that worked perfectly, and now it’s giving me the same error.
When searching online, it always refers to a permissions issue, which I logically can’t change.
Thank you very much for your help.

1 post - 1 participant

Read full topic

I guys, I like how the VSCode extension just let’s me hit Debug Web, starts Chrome and debug just works. I’m running into an issue where I want it to have a different configuration for my underlying angular app. No matter what I try, I always see this when starting the debug session :

[Ionic] Debugging...
> npx ionic serve --no-open --external --configuration=development
> ng.cmd run app:serve:development --host=0.0.0.0 --port=8100

It seems like there is no way to override the “development”
I would prefer to stay away from the whole : start ionic manually from the console, then open Chrome in remote debugging, then attach the debugger to it, feels a bit much for something this modern.

Let me know if I’m missing anything

Thanks

1 post - 1 participant

Read full topic

Hi
So currently im wotking in upgrading an ionic1 app to use the latest ionic 7

That been said the option for type “ionic1” was deprecated at ionic6 but saw that theres an option to leverage type custom, the thing is that i couldnt find anything regarding how can i use it and all i have in the console is “provide ionic:serve script” so far i tried looking for old build and serve ts files that got removed but havent been able to figure out how to doit without downgrade the cli

Thabks in advance

1 post - 1 participant

Read full topic

I am working on a project and it’s related to ionic capacitor application, I am trying to implement deeplink in my project(open my app when the link is clicked on a website), I have installed the plugin

npm install @ionic-native/deeplinks
and I am trying to run a command i.e
ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=demo --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=[demo.com](http://demo.com) --variable ANDROID_PATH_PREFIX=/

But I am facing the error :
[ERROR] Refusing to run ionic cordova plugin inside a Capacitor project.

I’ve also tried the command
npm i ionic-plugin-deeplinks -variable URL_SCHEME=demo -variable DEEPLINK_SCHEME=https -variable DEEPLINK_HOST=[demo.com](http://demo.com) -variable ANDROID_PATH_PREFIX=/

but facing the error :

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "URL_SCHEME=demo" of package "URL_SCHEME=demo": Tags may not have any characters that encodeURIComponent encodes

Can anyone help me out with this please, I would greatly appreciate it.

1 post - 1 participant

Read full topic

import { createApp } from ‘vue’;

import { IonicVue } from ‘@ionic/vue’;

import App from ‘./App.vue’;

import router from ‘./router’;

import VueSweetalert2 from ‘vue-sweetalert2’

import ‘sweetalert2/dist/sweetalert2.min.css’

import ‘@ionic/vue/css/core.css’;

import ‘@ionic/vue/css/normalize.css’;

import ‘@ionic/vue/css/structure.css’;

import ‘@ionic/vue/css/typography.css’;

import ‘@ionic/vue/css/padding.css’;

import ‘@ionic/vue/css/float-elements.css’;

import ‘@ionic/vue/css/text-alignment.css’;

import ‘@ionic/vue/css/text-transformation.css’;

import ‘@ionic/vue/css/flex-utils.css’;

import ‘@ionic/vue/css/display.css’;

import ‘./theme/variables.css’;

import axios from ‘axios’;

import ‘swiper/swiper-bundle.css’;

const mobileToken = localStorage.getItem(‘mobileToken’);

axios.defaults.baseURL = ‘http://bookbubblesonline.infinityfreeapp.com/api’;

axios.defaults.headers[‘Authorization’] = Bearer ${mobileToken};

const app = createApp(App)

.use(IonicVue)

.use(router)

.use(VueSweetalert2);

router.isReady().then(() => {

app.mount(‘#app’);

});

axios.defaults.baseURL = ‘http://bookbubblesonline.infinityfreeapp.com/api’;
This is my web hosting api and I cannot call that help me guys

1 post - 1 participant

Read full topic

Im building an app using the new Standalone components in Ionic 7.5.4

When running on the device with: ionic cap run ios --external -livereload or in the browser with: Ionic serve

Everything looks fine when I dont use the Ionic standalone components.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { BarcodeScanner, BarcodeFormat, LensFacing } from '@capacitor-mlkit/barcode-scanning';
import { RouterLinkWithHref, Router, ActivatedRoute } from '@angular/router';
import { ScrollElementDirective } from '../scroll-element.directive';
// import { IonButton, IonContent, IonCard, IonImg, IonGrid, IonModal, IonRow, IonCol, IonHeader, IonToolbar, IonTitle } from '@ionic/angular/standalone'; 


@Component({
  selector: 'app-scan',
  templateUrl: './scan.page.html',
  styleUrls: ['./scan.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule, RouterLinkWithHref, ScrollElementDirective] //, IonButton, IonContent, IonCard, IonImg, IonGrid, IonModal, IonRow, IonCol, IonHeader, IonToolbar, IonTitle]
})

As you can see I have commentet the components out, when I build on the device I need to add them back in. But then I get the error:
Error: NG0300: Multiple components match node with tagname ion-header: IonHeader and IonHeader.
If I remove the ionHeader it’s just the next component that has the fault.
Is serve and livereload on the device still using modules or loading everything before the standalone modules, have any of you an idea?

1 post - 1 participant

Read full topic

I am using a custom element library built in Stencil for my application which is also built with Stencil. When attempting to write Jest tests for my application, I encountered an issue where the application is unable to access elements from the custom elements library. How can I resolve this problem?

1 post - 1 participant

Read full topic

Buenos dias,

Estoy haciendo unas pruebas con Ionic 7.1.5, la informacion de instalacion es:

Ionic:

Ionic CLI : 7.1.5 (C:\Users\admin\AppData\Roaming\nvm\v20.9.0\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.5.6
@angular-devkit/build-angular : 17.0.3
@angular-devkit/schematics : 17.0.3
@angular/cli : 17.0.3
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/android : not installed
@capacitor/core : 5.5.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.7.4

System:

NodeJS : v20.9.0 (C:\Program Files\nodejs\node.exe)
npm : 10.1.0
OS : Windows 10

la version de Angular es

Angular CLI: 17.0.3
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.4
… animations, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router

Package Version

@angular-devkit/architect 0.1700.3
@angular-devkit/build-angular 17.0.3
@angular-devkit/core 17.0.3
@angular-devkit/schematics 17.0.3
@angular/cli 17.0.3
@angular/fire 0.0.0
@schematics/angular 17.0.3
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2

Hice la actualizacion de angular y quedo en la ultima version (17.0.3), al instalar el sdk para Firebase en la aplicacion teninedo en cuenta la documentacion (ng add @angular/fire) se presentan errores de integracion

demo\ArgExpress>ng add @angular/fire
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google’s Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see Angular. Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

ng analytics disable

Global setting: enabled
Local setting: enabled
Effective status: enabled
Using package manager: npm
Found compatible package version: @angular/fire@0.0.0.
Package information loaded.

The package @angular/fire@0.0.0 will be installed and executed.
Would you like to proceed? Yes
Packages successfully installed.
Error /> Package “@angular/fire” was found but does not support schematics.

este error se puede reproducir de la siguiente forma

1. realizar las actualizaciones de Ionic y Angular
2. ionic start nombreProyecto tabs
3. ng add @angular/fire => error install @angular/fire@0.0.0
4. se instala la version a fuerza (npm install @angular/fire@latest --force)

despues de esto se genera el error de configuracion y al intentar instalar cualquier paquete o plugin

1 post - 1 participant

Read full topic

What am I trying to accomplish?
I would like the path /user/${loggedInUser.id} to go to one IonPage
and /user/:userId to go a different IonPage.

The point being that I want ion router to cache its own instance of the loggedInUsers page while still using the same route matching strategy.

The problem is that because I don’t know what the loggedInUsers ID is until AFTER the router has been instantiated, I cannot dynamically add that route to the router. I am stuck because IonRouter works slightly differently here than react-router does. So how do I update the router routes config to include a priority route specifically for /user/${loggedInUser.id} after the auth has loaded?

I am using React Ionic v5.

1 post - 1 participant

Read full topic

Hello

I hope this email finds you well. My name is The Anh, and I am writing to express my admiration for the work you have done on your homepage at stenciljs.com. It’s evident that your team has skillfully utilized the Stencil framework, which has piqued my interest and appreciation.

As someone keenly interested in web development, specifically in efficient framework usage, I was particularly impressed by how your project showcases the capabilities of the Stencil framework. The layout, design elements, and responsiveness of your site serve as an inspiring benchmark for what can be achieved with this technology.

In light of this, I am reaching out to kindly inquire if it would be possible for you to share the source code of your homepage. I believe that studying it would provide me with invaluable insights and serve as an excellent reference point for my own development endeavors. I understand that this is a significant request, and I assure you that any shared code would strictly be used for educational purposes.

I am eager to learn from the best practices you have implemented and hope that this can be a learning opportunity for me. I appreciate any consideration you can give to my request and understand completely if it’s not feasible.

Thank you very much for your time and assistance. I look forward to the possibility of learning from your expertise.

Warm regards,
White

1 post - 1 participant

Read full topic

I wanted to capture a part of a screen in my mobile app and download it as a pdf or png.in my mobile application the download permisssion was not enabled. And i cant do it with the native storage permission plugin.Is there any way to redirect my captured screen to browser to download it.

1 post - 1 participant

Read full topic

Embark on a transformative journey into mobile app development with “Ionic Framework Essentials: From Basics to Advanced Techniques.” This comprehensive guide is crafted to empower developers, whether newcomers to the Ionic ecosystem or seasoned professionals seeking to master advanced techniques. Dive into the heart of Ionic, unravel its foundational principles, and elevate your skills to create cutting-edge cross-platform applications.
Chapter 1:Introduction to Ionic

Understanding the Ionic Framework
Exploring the Benefits of Cross-Platform Development
Setting Up Your Development Environment

Chapter 2:Ionic Basics: Building Blocks

Components and Directives
Styling with Ionic’s CSS Framework
Navigation and Routing Essentials

Chapter 3:Working with Ionic Components

Harnessing the Power of UI Components
Customizing and Extending Ionic Components
Form Controls and Input Handling

Chapter 4:Advanced Styling Techniques

SCSS and Theming Strategies
Responsive Design for Various Devices
Animation and Transition Effects

Chapter 5:Data Management in Ionic Apps

Handling Data with Ionic Services
Integrating APIs and Fetching External Data
Offline Data Storage Strategies

Chapter 6:Authentication and Security

mplementing User Authentication
Securing Ionic Apps: Best Practices
OAuth Integration and Social Sign-In

Chapter 7:Optimizing Performance

• Code Splitting and Lazy Loading
• Performance Monitoring and Optimization Tips
• Debugging and Profiling Ionic Apps

Chapter 8: Testing and Debugging Techniques
Unit Testing with Ionic
Debugging Strategies for Cross-Platform Apps
Embracing Continuous Integration

Chapter 9: Advanced Routing and Navigation
Nested Routing and Tab Navigation
Route Guards and Navigation Hooks
Dynamic Routing Patterns

1 post - 1 participant

Read full topic

Hi
I am building an application that has to cater for people with disabilities including visually impaired.
I need to populate the alt attribute of the breadcrumb image with the text of the links that have been replaced by the ellipses icon.
Is there a prop for this? I haven’t found one in the docs. If not how would I get access to the html element?
I am using Vue 3. I don’t think the TemplateRef is possible because the image is dynamic and within the iconic components. Its a button tag with class breadcrumbs-collapsed-indicator
Any ideas ?

1 post - 1 participant

Read full topic