I tried to do something like this:
this.$router.push({
path: '/tabs/home',
routerDirection: 'back'
});
That doesn’t work unfortunately but I need to be able to call the route in code and adjust the direction of the animation. Possible?
Oh and while I’m asking, how can I push props as well?
2 posts - 2 participants
Hi all. I’ve created an app with Cordova (without Ionic) and I would migrate to Capacitor (with Ionic). How can I do this?
1 post - 1 participant
Hey devs!
I am building a web app using StencilJS (2.3) and Ionic (5.2.3). I want to build a desktop navigation bar. I am trying to use an ion-toolbar but the toolbar (I think?) is clipping my dropdown menus and other content.
I think this is the same issue but no one proposed a solution: How to make a bootstrap dropdown extend outside of ion-header / ion-toolbar?
An example of the dropdown being clipped or cut off in the toolbar/header
<ion-header>
<ion-toolbar>
<div slot="start">
<div>
<sl-dropdown hoist={ true }>
<sl-button slot="trigger" caret>Dropdown</sl-button>
<sl-menu>
<sl-menu-item>Dropdown Item 1</sl-menu-item>
<sl-menu-item>Dropdown Item 2</sl-menu-item>
<sl-menu-item>Dropdown Item 3</sl-menu-item>
<sl-menu-divider></sl-menu-divider>
<sl-menu-item checked>Checked</sl-menu-item>
<sl-menu-item disabled>Disabled</sl-menu-item>
</sl-menu>
</sl-dropdown>
</div>
</div>
</ion-toolbar>
</ion-header>
An alternate question could be: is this an appropriate method to creating a desktop nav? Should I not wrap my nav in a toolbar and place this somewhere else, only showing it on desktop?
Any advice would be appreciated!
1 post - 1 participant
Hello, compared to list v-for loop it can be update the list using states but in ion slides not I receive this error.
DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.
Sample code:
<ion-slides
ref="showComp"
class="test"
@ionSlideReachEnd="addSlides"
pager="true"
:options="slideOpts"
v-else
>
<slide
v-for="content in contents"
:key="content.id"
:mediaURI="content.uri"
:metaProfile="content.meta.profile"
:metaUID="content.meta.uid"
:stars="content.star_count"
:postData="content.postdata"
:mediaType="content.media_types"
></slide>
</ion-slides>
for the initial slide fetch like getting 5 records it works but if I update the state and concat the existing data with new data like this
data:{id:1},{id:2},{id:3} to data:{id:1},{id:2},{id:3},{id:4},{id:5},{id:6}
resulting to
DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.
But this is working with the said situation above the code.
<ion-list>
<top-scorer
v-for="scorer in scorers"
:key="scorer.id"
:energy="scorer.score"
:tor="scorer.id"
:message="scorer.created_at"
:icon="scorer.icon"
></top-scorer>
</ion-list>
note: if the slide is in the end it will automatically add data to state and the reactivity will do the rest.
Thanks
2 posts - 1 participant
Hi everyone, I’m relatively new to ionic and I need help on this. Any replies would be greatly appreciated ! Thanks 
-loan.service.ts
-details.page.ts
1 post - 1 participant
Please any one can give me basic example. In the docs there’s no Vue code snippet only angular and react. Please help.
And whats the different between ion-nav and ion-router-outlet please give me sample on how can i implement this on my project. Please please please. I’m so beginner on this framework.
1 post - 1 participant
Hi all,
I have implemented the following service that gets information from capacitor storage.
export class StartupService {
public myActiveEntityDesc: BehaviorSubject<any> = new BehaviorSubject<any[]>([]);
public myActiveEntityID: BehaviorSubject<any> = new BehaviorSubject<any[]>([]);
constructor() { }
async getActiveEntity() {
Plugins.Storage.get({key: 'activeEntityDesc'}).then((data) => {
this.myActiveEntityDesc.next(data);
});
Plugins.Storage.get({key: 'activeEntityID'}).then((id_data) => {
this.myActiveEntityID.next(id_data);
});
}
}
and when I use this in a separate page, it all works great and updates as this value changes. Here is the code for a separate page:
this.startupService.getActiveEntity();
this.startupService.myActiveEntityDesc.subscribe((data) => {
this.retrievedEntityDesc = data;
});
this.startupService.myActiveEntityID.subscribe((id_data) => {
this.retrievedEntityID = id_data;
});
Now I have a menu defined in the app.component.ts file and I would like to display the Entity Name on the Menu.
Initially I call the function within the initializeApp() section, which works fine when the app loads and it gets the correct values, BUT… if this value changes it does not update in the Menu.
My suspicion is because this actually only runs once on App initialization.
My question is how or where do I need to call this function then so that it will update where it is displayed on the menu everytime this value is changed keeping in mind that I do want to be careful of not running queries or calls on every single page?
Any suggestions?
1 post - 1 participant
How would you organize your environment in ionic/angular for the following case (fictional scenario)?
Suppose we want to build a library of applications (sub-apps).
And you want to build real applications for companies X, Y, Z
CompanyXApp
CompanyYApp
Here
Can I thing these as submodules in GIT? If so how can I incorporate this in Ionic? Any possible issues?
I see that in Ionic can be organized for multiple apps, should I use this feature?
Can Company Library and Department Library co-exist, how can one incorporate those minor changes I mentioned? With “extends” or similar?
How would you organize the modules? Flat or hierarchical?
As such an environment would have a long life expectancy, would it be stable for (say) 5-6 years without complete overhaul?
Thanks in advance…
1 post - 1 participant
Hello,
I’m working on a project written by TypeScript for the backend and only needs a mobile app for the frontend.
Can I create a mobile app (Android/iOS) without any knowledge in Angular, React or Vue (really don’t need them)?
The Ionic homepage says I can use TS but when I browsed the docs I didn’t see any mentioning to TS. It shows Angular, React, Vue and JavaScript!
1 post - 1 participant
I am getting my iOS application rejected by the app store due to the following error -
ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability
I have tried everything mentioned in this post - https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/
Even after searching for ‘UIWebView’ in all files of Xcode, I am not getting any references to ‘UIWebView’. Still my application is getting rejected from the app store. This is really frustrating as we have to release the application on 1st January. Any help is highly appreciated.
Attaching screenshot of XCode Search
1 post - 1 participant
I am getting an error after my project builds in app flow : [ERROR] Sorry! ionic deploy manifest can only be run in an Ionic project directory.
I am using capacitor with tailwind/React, but not with Ionic. I was told and read that app flow can be used with any capacitor project. Is there tutorial on setting up appflow to work with a non ionic project?
NOTE: I have opened an issue on Zendesk, but since I am currently on the free tier, wasn’t sure if I was eligible for support. I do plan on paying for appflow and using it for this app to deploy to both app storees.
1 post - 1 participant
I’m trying to run Live reload in a project with stencil:
ionic capacitor run ios -l --external -p=4400
But I get the error
Since you’re using the custom project type, you must provide the ionic:serve npm script so the Ionic CLI can serve your project.
I found scripts for vue and for react, but nothing for stencil.
Thanks
1 post - 1 participant
I am getting the below error on the default unit tests provided for various pages in my Ionic 5/Angular application. All of the pages having issues use an AuthService I created, and only produce errors during unit tests, the application itself works fine.
Failed: R3InjectorError(DynamicTestModule)[AuthService -> Storage -> Storage]:
NullInjectorError: No provider for Storage!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'AuthService', 'Storage', 'Storage' ] })
I was previously getting an error on the AuthService itself, but was able to resolve that error by creating a mock storage object in the AuthService test. Both the service tests and page tests are pretty much out of the box, with a few changes. I have included both the service tests (which is currently passing), and one of the page tests (that is currently resulting in the error provided above). I am still working on understanding dependency injection, but I have tried adding AuthService to the page imports and providers list with no luck, any help would be appreciated, thanks!
auth.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';
import { Storage } from '@ionic/storage';
describe('AuthService', () => {
let service: AuthService;
beforeEach(() => {
const storageIonicMock: any = {
get: () => new Promise<any>((resolve, reject) => resolve('Demo Test User')),
set: () => new Promise<any>((resolve, reject) => resolve('Demo Test User')),
};
TestBed.configureTestingModule({
imports: [],
providers: [
{
provide: Storage,
useValue: storageIonicMock
}
]
});
service = TestBed.inject(AuthService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
home.page.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { HomePage } from './home.page';
describe('HomePage', () => {
let component: HomePage;
let fixture: ComponentFixture<HomePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomePage ],
imports: [
FormsModule,
IonicModule.forRoot(),
ReactiveFormsModule,
RouterTestingModule
]
}).compileComponents();
fixture = TestBed.createComponent(HomePage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
Ionic Info
Ionic:
Ionic CLI : 6.12.1 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.5
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Utility:
cordova-res (update available: 0.15.2) : 0.15.1
native-run (update available: 1.2.2) : 0.3.0
System:
NodeJS : v12.18.4 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/bin/node)
npm : 6.14.6
OS : macOS Big Sur
1 post - 1 participant
I’m looking for options and solutions for IOS 14 ITP problem.
Seems like there are bunch of paths floating around the internet. Trying to find the best solutions that work with ios 14 building with xcode 12+.
Some history as I understand it, correct me if I’m wrong.
First WKWebView was being pushed to be used.
This enforces CORS
In my case I was able to fix this problem by adding in a path for preflight check.
Had some other problems with cookies not being stored correctly. Thought I had solved that with a plugin- but -
That only worked on ios 13, once tested on ios 14 having problems again.
What I know is that a feature in ios 14 - ITP - enforces its own cross domain layer. Because all ionic/cordova app have a different domain can’t log in.
It does seem like its related to building code with Xcode 12.+ version. Have heard of people able to build a ios 14 app fine under xcode 11 something. Only seems to be enforced with Xcode 12+.
Looking for solutions to fix this.
1- Looks like apple add a tag for Info.plist WKAppBoundDomains. A kind of whitelist for other domains the app needs to talk to. This seems like the ideal path but I can’t see a Cordova way to really implement this or if anybody has got this working.
2- Some plugin solution.
I have been trying to use this
3- I have seen somebody say they had success adding in
To Config.xml but had to tweak their CORS on the server again to handle this.
Not completely clear on what is all needed. I might look into this more.
How has anybody in the community been able to build ios 14 apps in xcode 12+ and release them?
What worked for you?
Please state your ionic version and I guess which version of cordova-ios you are using. More details the better.
I’m stuck on Ionic 3.20 and cordova-ios 5.1.1 I think.
Hope to find a good solution one and for all.
1 post - 1 participant
I am using @ionic/angular 5.3.1.
I am seeking a way to programmatically click an ion-segment-button. I know that I can programmatically switch segments, but I want to also trigger the switching animation. (It is a use case where the user is in the wrong segment, and I want to the program to help teach the user where they want to be. The existing animation would be perfect for this.)
The problem is that the button element lies in the shadow DOM of the ion-segment-button. It can be accessed for CSS styling through the native Shadow Part[1], but don’t think I can access it programmatically to invoke its click() method.
I see that a similar issue was addressed in Ionic 4 here https://github.com/ionic-team/ionic-framework/issues/14980. There, it was implied that my goal is achievable by “using the ‘ionSelect’ event instead of ‘click’ and setting the checked property instead of clicking.” But when I look at the docs for ion-segment and ion-segment-button, I do not see any reference to either the IonSelect event, or the checked property.
Thank you, in advance, for your help.
[1] https://ionicframework.com/docs/api/segment-button#css-shadow-parts
1 post - 1 participant
Angular creates a sass file with each component and ionic comes with two sass files, one in the theme folder known as variables.scss and the other global.scss.
Now with angular you can follow 7 in 1 file pattern of sass, but how do I create a similar pattern with ionic, like where do i import all of my mixins, functions etc, maybe in the global.scss file?
1 post - 1 participant
Im trying to get the gesture controller demo to work. Any ideas what im missing?
2 posts - 1 participant
Hello,
In the past I was able to integrate some cordova / ionic / react native apps inside a native iOS app, having them be displayed when clicking one of the tab bar buttons.
I was wondering if anyone has done the reverse of that: with an out-of-the-box tabs app, add an extra tab that would display a native view controller.
Any tips would be appreciated.
Best,
2 posts - 2 participants
can i use external barcode scanner in ionic ?how`s it possible?
1 post - 1 participant
hi I am using ionic3 and I am having a problem
when keyboard is closed app doesn’t back to full-screen mode
the statue bar shows and device nav bar also is shown
any help
1 post - 1 participant