Hi,
I would like to pass a value from an ion-modal to the modal opening component on modal backdrop dismiss. I know, that I can check that it was a backdrop dismiss by modal.role === ‘backdrop’. But I would like to pass a variable e.g. “inputFieldValue” from modal to the modal opener on backdrop dismiss.
Is this possible?
Thank you!
1 post - 1 participant
Hi
since SSR with Angular Universal And Ionic - Ionic Blog got out, I wonder what the status is of Ionic support to Angular Universal. I ran the commands as per blog post and obviously (?) after a whille things have become different. At least on my side I get error ('configuration development is not set in workspace).
@mhartington - care to chip in about a year after the blog post?
Either way, just curious what the status is so I can continue trying in the right way
Thx
Tom
1 post - 1 participant
I made an ionic 5 application with Tabs.
Each Tab calls the same service.
The problem concerns the scope of the variables.
Each tab seems to create a new instance of the service, and the values of the variables are not preserved.
How do I make the service instance unique for all tabs?
1 post - 1 participant
Hi guys, I’m trying to implement dark theme in my ionic 5 application and everything works fine but when i refresh the browser the dark theme disappears and go back to light theme, how can i set default dark theme when the user choose it (sorry for my English).
darkMode(){
document.body.classList.toggle('dark');
}
1 post - 1 participant
I am creating a video call application in ionic 3. I can able to recieve call and communicate while my app is in open and background mode(maning when it is in minimized state). But when i close the app the connection to the server is getting closed and i am unable to call the peer. Note: I am using Kurento Media Server for video call. Please provide a solution how can i make my app to get in touch with server forever even if the app is closed/killed.
1 post - 1 participant
Hi all,
I need an information.
On my phone several apps creates a folder with the package name on internal storage.
Those folders are browsable from pc.
I would like to create a folder in internal storage for my app to store some generated images and pdf.
Actually the file are stored in file:///data/user/0/[packageName]/files/temp.pdf but this folder is not accessible from pc.
If I use Documents folder I get this error
Error: /storage/emulated/0/Documents/temp.pdf: open failed: EACCES (Permission denied)
why?
So… is it possible to create a personal folder on internal storage?
I cannot find anything on the web…
thanks
1 post - 1 participant
MainActivity.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Below MainActivity.java file code:-
package io.ionic.starter;
import com.getcapacitor.community.fcm.FCMPlugin;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Initializes the Bridge
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
// Additional plugins you've installed go here
// Ex: add(TotallyAwesomePlugin.class);
add(FCMPlugin.class);
}});
}
}
After installing Community FCM plugin I am not getting token.
Is there any issue with this code?
1 post - 1 participant
I’m currently using oneSignal native which I’m able to set up the SDK and sent push notification to ios and android device, and how am i able to retrieve the push notification data and display on a notification list.
1 post - 1 participant
I was looking for a solution to lock the Screenmode of my app to portrait mode only, found the Screen Orientation Ionic documentation, installed the plugins and synced it with capacitor and implemented it on every page is described.
First thing that was weird, was that when importing the ScreenOrientation and pressing tab it didn’t get the /ngx as source location, which is weird as it is stated in the Ionic documentation that is is needed.
Code:
import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {ScreenOrientation} from '@ionic-native/screen-orientation/ngx';
@Component({
selector: 'app-countdown',
templateUrl: './countdown.page.html',
styleUrls: ['./countdown.page.scss'],
})
export class CountdownPage implements OnInit {
constructor(private screenOrientation: ScreenOrientation) {
}
lockScreenOrientationPortrait(){
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
}
ngOnInit() {}
So I did that and it is not working, so I did a little research and found a post on StackOverflow that stated that it also has to be implemented in the app.module.ts so I implemented it there:
import { NgModule } from '@angular/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 { environment } from 'src/environments/environment';
import { HttpClientModule } from '@angular/common/http';
import {ScreenOrientation} from '@ionic-native/screen-orientation/ngx';
IonicModule.forRoot({
swipeBackEnabled: false
});
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers:[ScreenOrientation, {provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, ...environment.providers],
bootstrap: [AppComponent],
})
export class AppModule {}
Well that isn’t working either, I tried implementing it in the enviroment.ts which is implemented in the app.module.ts but I thought I can try stuff out - not working.
The error message of Karma states:
HomePage > should create
Failed: R3InjectorError(DynamicTestModule)[ScreenOrientation -> ScreenOrientation]:
NullInjectorError: No provider for ScreenOrientation!
and
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'ScreenOrientation', 'ScreenOrientation' ] })
NullInjectorError: R3InjectorError(DynamicTestModule)[ScreenOrientation -> ScreenOrientation]:
NullInjectorError: No provider for ScreenOrientation!
I also implemented it in the enviroment.test.ts, just in case, but not working either.
Keep in mind that this is not even close to being documented properly on the ionic website and different sources on different forums state different things on this problem.
Maybe somebody here has an idea of how to solve this.
1 post - 1 participant
I have an Ionic 5/Angular iOS app which builds fine as a non-production build and runs on both emulator and device as a dev build.
When I come to build it as a production build using:
ionic cordova build --prod --device
I use the ionic cordova build --prod command with the --device param to build the final IPA.
The build Archive succeeds (so I can get an APP file), but the final stage fails with:
Error Domain=IDEProvisioningErrorDomain Code=9 ""blah.app" requires a provisioning profile with the Associated Domains feature." UserInfo={IDEDistributionIssueSeverity=3, NSLocalizedDescription="blah.app" requires a provisioning profile with the Associated Domains feature., NSLocalizedRecoverySuggestion=Add a profile to the "provisioningProfiles" dictionary in your Export Options property list.}
However, the identifier for the app has the associated domains entitlement selected and the provisioning profile in Xcode confirms this. Even a quick-look on the file itself shows the entitlement to be present:
I’ve searched for help with this, but there appears to be nothing specifically like this, where a build is failing because the system says an entitlement isn’t there, when it actually is.
I’ve tried redoing all of the signing from scratch, to no avail.
Has anyone seen/fixed this before, and if so, what did you do? Tearing my hair out.
1 post - 1 participant
I am using ionic vue to build an app and wanna save tokens by Storage of Capacitor. The first test is good with browsers when I took their example put to App.vue to run.
But unfortunately when I work in android. That does not make any sense, event thought to make an alert when initializing the app without an alert come in.
May I have something wrong with the code or missing something?
1 post - 1 participant
Hi guys, I just started to use ionic and this issue came up that I click the button on tab one , it moves to the url but it doesn’t load the component on top .
Thanks in advance.
1 post - 1 participant
Hi there! Every time I click on a radio button on my page, I see a new style added to ion-content, like that:
<ion-content _ngcontent-hwh-c152="" ng-reflect-scroll-y="true" class="ios overscroll hydrated" style="--offset-top:0px; --offset-bottom:0px; --keyboard-offset:290px;">
Notice that --keyboard-offset:290px.
Then, every time I click at any place on my page, that value disappears,as if change detection gets triggered, and becomes --keyboard-offset:0px.
That new value breaks my layout, and I wonder if there a way to make Ionic stop adding it. Thank you!
1 post - 1 participant
I am unable to understand why storage access is required for the camera plugin to work on Android. If i do not have give storage access and want only the camera to work why cant i do that? Currently i must have to give storage access
1 post - 1 participant
Hello,
I’ve noticed an unusual behavior with the mobile keyboard popup animation.
The ion-footer exists when the keyboard is opened or closed but disappears with the open keyboard animation.
Does anybody know a fix to this?
Thanks for your time.
Ionic CLI : 6.16.3
Ionic Framework : @ionic/angular 5.6.11
@angular/cli : 12.0.5
Capacitor CLI : 3.1.1
1 post - 1 participant
I’m trying to set the ripple color for the back button using the ionic’s custom CSS property (--ripple-color). However, I don’t see that working. Here’s my piece of code
header.html
<!-- Default back button -->
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/" text=""></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
header.scss
ion-back-button {
--ripple-color: red;
}
1 post - 1 participant
Please help me I am getting error.
[ng] Error: node_modules/@ionic/storage/es2015/storage.d.ts:2:10 - error TS2305: Module ‘"@angular/core"’ has no exported member ‘OpaqueToken’.
[ng] 2 import { OpaqueToken } from ‘@angular/core’;
[ng]
npm list :-
±- ngcc_entry_points.json@ extraneous
±- @angular-devkit/build-angular@12.1.4
±- @angular-eslint/builder@12.0.0
±- @angular-eslint/eslint-plugin-template@12.0.0
±- @angular-eslint/eslint-plugin@12.0.0
±- @angular-eslint/template-parser@12.0.0
±- @angular/cli@12.1.4
±- @angular/common@12.1.5
±- @angular/compiler-cli@12.1.5
±- @angular/compiler@12.1.5
±- @angular/core@12.1.5
±- @angular/forms@12.1.5
±- @angular/language-service@12.0.5
±- @angular/platform-browser-dynamic@12.1.5
±- @angular/platform-browser@12.1.5
±- @angular/router@12.1.5
±- @ionic-native/app-version@5.35.0
±- @ionic-native/base64@5.35.0
±- @ionic-native/call-number@5.35.0
±- @ionic-native/camera@5.35.0
±- @ionic-native/fcm@5.35.0
±- @ionic-native/file-chooser@5.35.0
±- @ionic-native/file-path@5.35.0
±- @ionic-native/file-transfer@5.35.0
±- @ionic-native/file@5.35.0
±- @ionic-native/firebase-authentication@5.35.0
±- @ionic-native/in-app-browser@5.35.0
±- @ionic-native/market@5.35.0
±- @ionic-native/photo-viewer@5.35.0
±- @ionic-native/social-sharing@5.35.0
±- @ionic-native/splash-screen@5.35.0
±- @ionic-native/status-bar@5.35.0
±- @ionic-native/streaming-media@5.35.0
±- @ionic-native/web-intent@5.35.0
±- @ionic/angular-toolkit@4.0.0
±- @ionic/angular@5.6.13
±- @ionic/storage-angular@3.0.6
±- @ionic/storage@2.0.0
±- @ngx-translate/core@13.0.0
±- @ngx-translate/http-loader@6.0.0
±- @types/jasmine@3.6.11
±- @types/jasminewd2@2.0.10
±- @types/node@12.20.19
±- @typescript-eslint/eslint-plugin@4.16.1
±- @typescript-eslint/parser@4.16.1
±- call-number@1.0.1
±- com-badrit-base64@0.2.0
±- com-darryncampbell-cordova-plugin-intent@2.0.0
±- com-sarriaroman-photoviewer@1.2.5
±- cordova-android@9.1.0
±- cordova-plugin-androidx-adapter@1.1.3
±- cordova-plugin-androidx@3.0.0
±- cordova-plugin-app-version@0.1.12
±- cordova-plugin-cache-clear@1.3.8
±- cordova-plugin-camera@5.0.3
±- cordova-plugin-device@2.0.2
±- cordova-plugin-fcm-with-dependecy-updated@7.8.0
±- cordova-plugin-file-transfer@1.7.1
±- cordova-plugin-file@6.0.2
±- cordova-plugin-filechooser@1.2.0
±- cordova-plugin-filepath@1.6.0
±- cordova-plugin-firebase-authentication@5.0.0
±- cordova-plugin-inappbrowser@5.0.0
±- cordova-plugin-ionic-keyboard@2.2.0
±- cordova-plugin-ionic-webview@4.2.1
±- cordova-plugin-market@1.2.0
±- cordova-plugin-splashscreen@5.0.2
±- cordova-plugin-statusbar@2.4.2
±- cordova-plugin-streaming-media@2.3.0
±- cordova-plugin-whitelist@1.3.3
±- cordova-plugin-x-socialsharing@6.0.3
±- cordova-sqlite-storage@6.0.0
±- cordova-support-android-plugin@1.0.2
±- es6-promise-plugin@4.2.2
±- eslint-plugin-import@2.22.1
±- eslint-plugin-jsdoc@30.7.6
±- eslint-plugin-prefer-arrow@1.2.2
±- eslint@7.32.0
±- firebase@8.9.0
±- jasmine-core@3.8.0
±- jasmine-spec-reporter@5.0.2
±- karma-chrome-launcher@3.1.0
±- karma-coverage-istanbul-reporter@3.0.3
±- karma-coverage@2.0.3
±- karma-jasmine-html-reporter@1.7.0
±- karma-jasmine@4.0.1
±- karma@6.3.4
±- localforage-cordovasqlitedriver@1.8.0
±- ngx-ionic-image-viewer@0.7.4
±- ngx-navigation-with-data@2.0.0
±- protractor@7.0.0
±- rxjs@6.6.7
±- ts-node@8.3.0
±- tslib@2.3.0
±- typescript@4.2.4
`-- zone.js@0.11.4
Ionic Info -:
Ionic:
Ionic CLI : 6.16.3 (C:\Users\User\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.6.13
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.2.0
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 23 other plugins)
Utility:
cordova-res : 0.15.3
native-run : 1.1.0
System:
Android SDK Tools : 26.1.1 (C:\Users\User\AppData\Local\Android\Sdk)
NodeJS : v14.15.0 (C:\Program Files\nodejs\node.exe)
npm : 7.20.3
OS : Windows 10
1 post - 1 participant
I’m trying to integrate my Ionic/Capacitor app with Microsoft Authentication Library (Msal), and unfortunatly i couldn’t found any Capacitor plugin for that, only found this Cordova plugin with its Ionic wrapper.
So I’ve followed the instructions of how to use cordova plugins with capacitor according with the instructions of the plugin itself, but unforunatly with no success.
The problem is in the cordova plugin not being executed:
cordova.exec(successCallback, errorCallback, 'MsalPlugin', 'msalInit', [JSON.stringify(options)]);
I added the cordova.js and cordova_plugin.js in index.html , but still calling another place rather than the real exec function (I’ve tried in cordova project to see what it’s calling).
Was i missing something in the integration between cordova and capacitor, or it’s something in plugin itself preventing it from being working with capacitor.
1 post - 1 participant
I am trying to use this example to later implement Tabs in my project but the output is
Error: IonTabs must contain an IonRouterOutlet
Is it possible to avoid routes and use the onclick method? Because what I want to do is open a ionModal
<IonTabs>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon icon={calendar} />
<IonLabel>Schedule</IonLabel>
<IonBadge>6</IonBadge>
</IonTabButton>
<IonTabButton tab="speakers">
<IonIcon icon={personCircle} />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabButton tab="map">
<IonIcon icon={map} />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="about">
<IonIcon icon={informationCircle} />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
1 post - 1 participant
Check out my routes:
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: Tabs,
children: [
{
path: "",
redirect: "/surveys",
},
{
path: "surveys",
component: Surveys,
},
{
path: "settings",
component: Settings,
},
{
name: "survey",
path: "/surveys/:surveyid",
component: SurveyRouterOutlet,
props: true,
children: [
{
path: "",
component: Survey,
props: true,
},
{
path: "components/:componentid",
component: Component,
props: true,
},
{
path: "components/new/:type",
component: Component,
props: true,
},
{
name: "preview",
path: "preview/:previewid",
component: Preview,
props: true,
},
],
},
],
},
];
As you can see when I go from /surveys to /surveys/4 for example, there is no animation. If I go from /surveys/4/components/8 I get animation. I believe because I have to use SurveyRouterOutlet it doesn’t quite work the same as going directly to the component. How can this be fixed or how can I have those same routes in a different way?
1 post - 1 participant