Someone have fixed ModuleWithProviders issue after Angular 10 update ?
I’ve this err:
[ng] ERROR in node_modules/@ionic/storage/index.d.ts:5:52 - error TS2314: Generic type ‘ModuleWithProviders’ requires 1 type argument(s).
[ng] 5 static forRoot(storageConfig?: StorageConfig): ModuleWithProviders;
Thanks
1 post - 1 participant
We are developing a website in Ionic 5 - Angular. We want the website to be SEO friendly so that search engines can easily crawl the website. Normally if we do a view source of a Ionic project it does not show the full html content that is rendered to the browser and so search engines cannot crawl it. Is their any way to render Ionic 5 websites like normal websites?
1 post - 1 participant
I want to add css in ion-searchbar’s input
This is ionic code.
html view
how can I add ?
7 posts - 3 participants
Hi !
I’m trying to impliment a custom sound to my app ,
but it doesn’t seems to take effect tried to move the file in diffrent folder but notthing changed
I’m using v5 with @ionic-native/local-notifications plugin
Where the cash.mp3 file must be placed ?
this.localNotifications.schedule({
id: 1,
text: 'Single ILocalNotification',
sound: 'file://cash.mp3',
data: { secret: key }
});
Kind regards
1 post - 1 participant
Hi all,
I am currently developing an Ionic 5 with Angular project and I came across the native sqlite where;
Versions:
@ionic-native/sqlite - v5.27.0
Code Snippet:
this.sqlite.create({
name: test.db,
location: ‘default’,
key: '1234567’
})
am just wondering what does the “key” does? Have tried to set the key, and able to extract the SQLite .db file and open in the DB Browser Tool.
I would like to encrypt the db file, or set it with a password at least but it seems such information is hard to come by.
Any help is appreciated.
Thank you all in advance !
1 post - 1 participant
My team and I created a social media app in ionic version 4. The videos are fetched from an S3 bucket to the Application. The Application was running fine till yesterday. Today We are facing issue in loading videos. Instead of the video file getting loaded I am seeing black boxes and the application totally freezes and starts flickering, when I load Image files from the S3 bucket the application runs fine.
I am not seeing this Issue in iOS version of the application where the videos are loading properly and the video is rendered via HTML5 video tag.These issues occur in some Android version 10 devices but not in Android version 9,
any help would be great Thanks in advance.
1 post - 1 participant
I am new to use ionic appflow, and met some issues.
My appflow plan is launch plan ($49/month). I have already set up certificates and destination, however, when I tried to build app, the destination option is not show.
Who knows how to resolve this problem?
2 posts - 2 participants
Hey everyone, just wanted to share we pushed a small update for @ionic/angular-toolkit
This is a small update to include support for Angular v10.0 support.
To update, please run:
npm i @ionic/angular-toolkit@latest
Cheers!
1 post - 1 participant
Hello everybody,
I’m actually struggling with an issue.
I have an ion-tabs who contain this tab :
<ion-tab-button tab="plus" (click)="toggleMenu()">
<ion-label>Plus</ion-label>
<ion-icon name="ellipsis-horizontal"></ion-icon>
</ion-tab-button>
I used before the ion-menu-toggle but its working better with a function reacting on the click of this button.
This part of code is include in my tabs page.
I have another page for my side menu.
i’m using simply an ion-menu with ion-content and différent ion-menu-toggle.
Everything is working fine.
But when I’m charging my app for the first time and I haven’t press the plus tabs yet, it didn’t open the menu.
Firstly it goes to the ‘plus’ page (who contains my menu).
It opens the page, I put an ion-content where I wrotte ‘menu’ to see if it goes to this page and it does.
If i’m pressing the plus tabs again it opens my menu then.
And when I leave to another tab and I come back to this one later it works perfectly.
It’s just not working for the first time.
So it’s not totally great for user experience, because if you want to open this tab (the menu) for the first time, it seems like it doesn’t work, you have to press one more time to makes it work.
Secondly I suppose I should keep my actual page when i want to open the side menu, and not going to the plus page.
But it’s okay if I keep another page for the menu, i can replace the actual code of the page who contain ‘menu’ by something else later like a picture.
This is the code of plus (menu) page :
<ion-header>
<app-toolbar></app-toolbar>
</ion-header>
<ion-content>
Menu
</ion-content>
<ion-app>
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<h1 class="ion-text-center">Menu</h1>
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/tabs/plus/game">
<ion-icon name="trophy" slot="start"></ion-icon>
<ion-label>Jeux Concours</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/tabs/plus/tickets" >
<ion-icon name="pricetag" slot="start"></ion-icon>
<ion-label>Billeterie</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/tabs/plus/social" >
<ion-icon name="logo-facebook" slot="start"></ion-icon>
<ion-label>Réseaux Sociaux</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/tabs/plus/news">
<ion-icon name="newspaper" slot="start"></ion-icon>
<ion-label>Actualités</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/tabs/plus/gallery">
<ion-icon name="images" slot="start"></ion-icon>
<ion-label>Galerie Photos</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/tabs/plus/settings">
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Paramètres</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<!--logo-->
<div class="ion-text-center" style="margin-top: 5vh">
<img src="../../assets/logo/logobleu.png"/>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
Thanks in advance, if someone actually had this kind of problems…
I’m using Ionic V5 with Angular.
1 post - 1 participant
Our mobile app has multiple functionalities. One of it is to embed a third party webpage. I want to retain my app’s header and footer menu. I explored on multiple possibilities (in-app browser, iframe) but none of it match our requirements. Basically we need iframe kind of a component, without using iframe.
If there is a enterprise plugin available, we are interested to know if we can make use of it.
1 post - 1 participant
In my Ionic 5 app, I am trying to create a grid that behaves like below:
Here is what I currently have, but it’s not working as expected:
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col size="6" size-sm="12">
<ion-card>
<ion-img src="assets/images/mypic.jpg"></ion-img>
</ion-card>
</ion-col>
<ion-col size="6" size-sm="12">
<ion-card>
<ion-img src="assets/images/mypic.jpg"></ion-img>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Can someone please point out where I’m going wrong & what I need to change?
1 post - 1 participant
Hello I need to migrate my application that is in ionic 1 to a higher version, so I recommend to take it to 4 and not to newer versions because of the big changes, someone could help me with this, thank you very much
1 post - 1 participant
Hi all 
Soon, I will be porting/migrating an Angular CLI + Cordova app to Ionic + Angular + Capacitor.
If you have any tips & tricks, advice, useful resources, etc, that would help me in this process please do let me know. I will much appreciate it.
Thanks in advance! 
1 post - 1 participant
I have an ionic 4 app where I am using the plugin with cordova-android - “^8.1.0”.
I just updated to cordova-android 9.0.0.
The ble.scan function is no longer returning anything.
A simple test case is:
this.ble.scan([], 5).subscribe(device => {
console.log(JSON.stringify(device));
});
If I revert back to cordova-android 8.1.0 it works fine.
One other item of note is that when I first launch the app with cordova-android 8 it has a popup that has 3 options - use location services all the time, use location services only when using the app, and to not use location services. When I update to cordova-android 9 the first option (use all the time) is no longer part of the pop up. Don’t know if it is related or not.
Is anyone else experiencing this issue?
Has anyone else updated to cordova-android 9.0.0?
If so what did you do to resolve it?
Thanks
1 post - 1 participant
(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
1 post - 1 participant
Hi,
I am trying to build a mobile app using ionic framework and it seems that there are plugins using uiwebview which is deprecated so I can’t build IOS version from my app
I already added WKwebview and updated config.xml file.I tried run this command grep -lr “UIWebView” * and the result was:
ode_modules/cordova-ios/bin/templates/project/www/index.html
node_modules/cordova-ios/bin/templates/project/PROJECT_NAME/Classes/MainViewController.m
node_modules/cordova-ios/tests/spec/unit/fixtures/ios-config-xml/CordovaLib/CordovaLib.xcodeproj/project.pbxproj
node_modules/cordova-ios/tests/spec/unit/fixtures/ios-config-xml/SampleApp/Classes/MainViewController.m
node_modules/cordova-ios/tests/CordovaLibTests/CDVWebViewTest.h
node_modules/cordova-ios/tests/CordovaLibTests/CDVUserAgentTest.m
node_modules/cordova-ios/tests/CordovaLibTests/CDVWhitelistTests.m
node_modules/cordova-ios/tests/CordovaLibTests/CDVWebViewDelegateTests.m
node_modules/cordova-ios/tests/CordovaLibTests/CDVWebViewTest.m
node_modules/cordova-ios/RELEASENOTES.md
node_modules/cordova-ios/guides/Setting Delegates, Preferences and Script Message Handlers in the WebView.md
node_modules/cordova-ios/guides/API changes in 4.0.md
node_modules/cordova-ios/CordovaLib/Classes/Public/CDVCommandDelegateImpl.m
node_modules/cordova-ios/CordovaLib/Classes/Public/CDVUserAgentUtil.m
node_modules/cordova-ios/CordovaLib/Classes/Public/CDVWebViewEngineProtocol.h
node_modules/cordova-ios/CordovaLib/Classes/Public/CDVCommandDelegate.h
node_modules/cordova-ios/CordovaLib/Classes/Public/CDVViewController.m
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVIntentAndNavigationFilter/CDVIntentAndNavigationFilter.m
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVIntentAndNavigationFilter/CDVIntentAndNavigationFilter.h
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVLocalStorage/CDVLocalStorage.m
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewNavigationDelegate.h
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.m
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.h
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewNavigationDelegate.m
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.h
node_modules/cordova-ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.m
node_modules/cordova-ios/CordovaLib/CordovaLib.xcodeproj/project.pbxproj
node_modules/@ionic/core/dist/ionic/swiper/swiper.bundle.js
node_modules/@ionic/core/dist/collection/components/slides/swiper/swiper.bundle.js
node_modules/@ionic/core/dist/esm/swiper.bundle-ccdaac54.js
node_modules/@ionic/core/dist/esm-es5/swiper.bundle-ccdaac54.js
node_modules/@ionic/core/dist/cjs/swiper.bundle-f80f3318.js
node_modules/@ionic/core/hydrate/index.js
node_modules/cordova-android/bin/templates/project/assets/www/index.html
node_modules/cordova-plugin-whitelist/README.md
node_modules/cordova-plugin-wkwebview-engine/RELEASENOTES.md
node_modules/cordova-plugin-wkwebview-engine/README.md
node_modules/cordova-plugin-wkwebview-engine/src/ios/CDVWKWebViewEngine.m
node_modules/.cache/angular-build-dl/content-v2/sha512/92/35/57415489063524eeee1dc2a4bca229fd8e6be3a2809a1560dd95e7c630ee6da2ba5e167df0f0580854b2c927ec2017620fc0f5c67dac9737a9c70a06dc4f
node_modules/.cache/angular-build-dl/content-v2/sha512/ec/8b/d551c73d0d8f334583875c815928bd9d5dd416159deab41a0abcd7269414f26aef2a8a44b26f51214b4090232f3745b7528ce29e0cc6537e3bda963f4e35
node_modules/.cache/angular-build-dl/content-v2/sha512/21/f0/ffe512d1f574ff4dcab3f1a4c83aa3839939f504a16ed96f8f6e2933c76cc568c09ae9dcad9f771f3a72900d896d0b418b3912b1cbadf7a8cb2643d3a359
node_modules/.cache/angular-build-dl/content-v2/sha512/48/1a/caeaa6b2b6bb9fe0d10bd537c1111f3b4305600baf1be811263be26dc050acdf4fcf026febf96a6c819b56eda520e882b381d10c28b62de9913a79d44337
platforms/ios/AX WF Approval/Classes/MainViewController.m
platforms/ios/AX WF Approval/Plugins/cordova-plugin-wkwebview-engine/CDVWKWebViewEngine.m
platforms/ios/www/swiper-bundle-ccdaac54-js-es2015.js.map
platforms/ios/www/swiper-bundle-ccdaac54-js-es5.js.map
platforms/ios/www/swiper-bundle-ccdaac54-js-es5.js
platforms/ios/www/swiper-bundle-ccdaac54-js-es2015.js
platforms/ios/CordovaLib/Classes/Public/CDVCommandDelegateImpl.m
platforms/ios/CordovaLib/Classes/Public/CDVUserAgentUtil.m
platforms/ios/CordovaLib/Classes/Public/CDVWebViewEngineProtocol.h
platforms/ios/CordovaLib/Classes/Public/CDVCommandDelegate.h
platforms/ios/CordovaLib/Classes/Public/CDVViewController.m
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVIntentAndNavigationFilter/CDVIntentAndNavigationFilter.m
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVIntentAndNavigationFilter/CDVIntentAndNavigationFilter.h
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVLocalStorage/CDVLocalStorage.m
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewNavigationDelegate.h
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.m
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.h
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewNavigationDelegate.m
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewDelegate.h
platforms/ios/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.m
platforms/ios/CordovaLib/CordovaLib.xcodeproj/project.pbxproj
plugins/cordova-plugin-whitelist/README.md
plugins/cordova-plugin-wkwebview-engine/RELEASENOTES.md
plugins/cordova-plugin-wkwebview-engine/README.md
plugins/cordova-plugin-wkwebview-engine/src/ios/CDVWKWebViewEngine.m
www/swiper-bundle-ccdaac54-js-es2015.js.map
www/swiper-bundle-ccdaac54-js-es5.js.map
www/swiper-bundle-ccdaac54-js-es5.js
www/swiper-bundle-ccdaac54-js-es2015.js
2 posts - 2 participants
Good news, everyone!
TLDR: Ionic Splash and Icons
I just had to prepare the app I’m working on for three new clients. Worst part of the job is always creating a s#!tload of splash screens and icons. So I created a template file for Affinity Designer to simplify the process.
If you happen to use Affinity Designer, feel free to grab the template - probably will save you some work.
Ionic Splash and Icons
If you don’t know Affinity Designer, but you have to deal with gfx elements (and I believe most of you have), I highly recommend you to give it a try.
1 post - 1 participant
Hi,
in my project, the iBeacon plugin doesn’t fire delegate.didRangeBeaconsInRegion() event.
Only delegate.didStartMonitoringForRegion() event is triggered
only once the delegate.didRangeBeaconsInRegion() event works fine with range all beacons after close and open nothing happend and before it work’s the event not fire also. So completly random.
Here my code:
import {Component, OnInit} from ‘@angular/core’;
import {IBeacon} from ‘@ionic-native/ibeacon/ngx’;
@Component({
selector: ‘app-store’,
templateUrl: ‘./store.page.html’,
styleUrls: [’./store.page.scss’],
})
export class StorePage implements OnInit {
beacons: any[] = [];
constructor(private ibeacon: IBeacon) {
}
ionViewWillEnter() {
// Request permission to use location on iOS
this.ibeacon.requestAlwaysAuthorization();
// create a new delegate and register it with the native layer
const delegate = this.ibeacon.Delegate();
// Subscribe to some of the delegate's event handlers
delegate.didRangeBeaconsInRegion()
.subscribe(
data => {
console.log('didRangeBeaconsInRegion: ', data);
if (data.beacons.length > 0) {
data.beacons.forEach(beacon => {
this.beacons.push(beacon);
});
}
},
error => console.error(error)
);
delegate.didStartMonitoringForRegion()
.subscribe(
data => console.log('didStartMonitoringForRegion: ', data),
error => console.error(error)
);
delegate.didEnterRegion()
.subscribe(
data => {
console.log('didEnterRegion: ', data);
},
error => console.error(error)
);
const beaconRegion = this.ibeacon.BeaconRegion('RegionName', 'xxx); // UUID hide
this.ibeacon.startMonitoringForRegion(beaconRegion)
.then(
() => console.log('Native layer received the request to monitoring'),
error => console.error('Native layer failed to begin monitoring: ', error)
);
}
ngOnInit() {
}
}
$ ionic info
Ionic:
Ionic CLI : 5.4.16 (C:\Users\XXX\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 5.2.3
@angular-devkit/build-angular : 0.901.11
@angular-devkit/schematics : 9.1.11
@angular/cli : 9.1.11
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0-nightly.2019.9.10.42c0cba7
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res : 0.15.1
native-run : 1.0.0
System:
Android SDK Tools : 26.1.1 (C:\Users\XXX\AppData\Local\Android\sdk)
NodeJS : v13.12.0 (D:\Programme\NodeJS\node.exe)
npm : 6.14.4
OS : Windows 10
1 post - 1 participant
Hi!
Im creating an app and I need to keep working in background but this doesnt work. Im using:
I am on Visual studio with ionic , so I execute:
ionic cordova run android
The app is launched and working. The first view is a Login, I fill the login and this take me to the second view (thit is a tab page). On this page I add:
import { BackgroundMode } from '@ionic-native/background-mode/ngx';
constructor(private background: BackgroundMode){
this.background.enable();
console.log(this.background.isEnable());
console.log(this.background.isActive());
this.background.moveToBackground();
}
Also, console.log shows that background mode is enabled, but not active (that is normal).
The problem is that when I move the app to the background, is “restarted” . I mean that when I open the app from the background it takes me again to the first view where I should do the Login. So this is not working.
Am I doing something wrong? Is visual studio?** How can I solve it?**
Thanks!
1 post - 1 participant
I’m struggling to get a simple routing flow working.
Basically want to start with a few pages on app loaded; namely login, create account, landing page. So routing between these. Then once logged in, switch to a dashboard with tabs for navigation.
So in my current attempt, the root of the app renders this…
<IonReactRouter>
<IonRouterOutlet>
{/* <Route path="/account/create" component={CreateAccount} exact /> */}
<Route path="/" component={Landing} exact />
<Route path="/dashboard" component={Dashboard} exact />
<Route path="/account/login" component={Login} exact />
<Redirect from="/" to="/" />
</IonRouterOutlet>
</IonReactRouter>
then the dashboard page renders this…
<IonTabs>
<IonRouterOutlet>
<Redirect path="/dashboard" to="/birthdays" exact />
<Route path="/birthdays" component={BirthdayList} exact />
<Route path="/birthday-add" component={AddBirthday} exact />
<Route path="/birthday-edit/:id" component={EditBirthday} exact />
<Route path="/birthday-view/:id" component={ViewBirthday} exact />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="birthdays" href="/birthdays">
<IonIcon icon={listOutline} />
<IonLabel>Birthdays</IonLabel>
</IonTabButton>
<IonTabButton tab="birthday-add" href="/birthday-add">
<IonIcon icon={addOutline} />
<IonLabel>Add Birthday</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" onClick={() => firebase.auth().signOut()}>
<IonIcon icon={personOutline} />
<IonLabel>Profile</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
So I can see the landing page, then switch to the login page, then on logging in, it will send me to the dashboard. Except the page is not being displayed in the dashboard because of this line…
i.e.
.ion-page-invisible {
opacity: 0;
}
Not sure if this is a bug or a routing issue. Also not sure if this is the correct way to do this with IonReactRouter?
1 post - 1 participant