With system dark mode enabled for iOS ion-cards become basically invisible. Is something set up wrong in my project or is this correct? On Android the card has a slightly lighter background and it looks a lot better.
Any suggestions on this would be great.
1 post - 1 participant
Hello people,
I am building a PWA with ionic 5 Angular and I performed the tests using http, because I find it simpler since I don’t have a valid ssl certificate.
The problem is that some components are not being loaded sometimes they do not load the ionic components (toast, modal, action sheet) other times they do not even load the icons of the action sheet. My routes in the app-rpiutings are being loaded with lazy-loading.
Sorry for my English.
GET https://localhost:8100/stencil-ion-segment_2-md-entry-js.js net::ERR_CERT_AUTHORITY_INVALID
index-2cd7e630.js:1961 ChunkLoadError: Loading chunk stencil-ion-segment_2-md-entry-js failed.
(error: https://localhost:8100/stencil-ion-segment_2-md-entry-js.js)
at requireEnsure (https://localhost:8100/runtime.js:127:26)
at Array.map (<anonymous>)
at webpackAsyncContext (https://localhost:8100/main.js:486:34)
at loadModule (https://localhost:8100/vendor.js:108869:166)
at initializeComponent (https://localhost:8100/vendor.js:108524:20)
at https://localhost:8100/vendor.js:108666:32
at ZoneDelegate.invoke (https://localhost:8100/polyfills.js:3709:26)
at Zone.run (https://localhost:8100/polyfills.js:3474:43)
at https://localhost:8100/polyfills.js:4205:36
at ZoneDelegate.invokeTask (https://localhost:8100/polyfills.js:3741:31)
Unhandled Promise rejection: Cannot read property 'isProxied' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (index-2cd7e630.js:1633) TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (https://localhost:8100/vendor.js:108531:24)
GET https://localhost:8100/stencil-ion-action-sheet-md-entry-js.js net::ERR_CERT_AUTHORITY_INVALID
ChunkLoadError: Loading chunk stencil-ion-action-sheet-md-entry-js failed.
(error: https://localhost:8100/stencil-ion-action-sheet-md-entry-js.js)
at requireEnsure (https://localhost:8100/runtime.js:127:26)
at Array.map (<anonymous>)
at webpackAsyncContext (https://localhost:8100/main.js:486:34)
at loadModule (https://localhost:8100/vendor.js:108869:166)
at initializeComponent (https://localhost:8100/vendor.js:108524:20)
at https://localhost:8100/vendor.js:108666:32
at ZoneDelegate.invoke (https://localhost:8100/polyfills.js:3709:26)
at Zone.run (https://localhost:8100/polyfills.js:3474:43)
at https://localhost:8100/polyfills.js:4205:36
at ZoneDelegate.invokeTask (https://localhost:8100/polyfills.js:3741:31)
1 post - 1 participant
ion camera provides directive and service that manages everything for you out of box.
Npm link : https://www.npmjs.com/package/@indraraj26/ion-camera
Upcoming feat: upload through http return progress and response
1 post - 1 participant
Question using the ionic youtube plugin how can i change my view from full screen when it opens the youtube app to vertical not full screen. I just want it to open so people can also comment or click like. It always open to full screen.
1 post - 1 participant
I am using ion-select with ion-select-option in ionic v5. My problem is that when the text is selected it is displayed within a div of class select-text that is part of a shadow dom. The text has the css white-space:nowrap so I cannot see all of the text. See example image.
I would like to have multi-line text and control it myself, similar to:
This has been done within a web emulator using chromium.
I have found the code that generates the select-text (ion-select_3-md.entry.js) and the white-space css is not built from a variable and it is not inherited. Here is an extract: .select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}. So short of changing the md and ios code how can I achieve having wrapped selected text?
Any help would be much appreciated.
1 post - 1 participant
Hi. I’m using ion-datetime in Ionic 5. My client has asked me to make it less sensitive as it’s hard to pick the date and time (I agree). Is there any way to make it a bit easier to “land” on the date, please? Maybe a snap setting or something? Thanks.
1 post - 1 participant
salut,je travail sur une application android avec ionic, et lorsque je lance la commende Ionic Cordova Build Android j’ai toujour cette erreur qui persiste.
merci d’avance.
1 post - 1 participant
I have noticed in a few of my projects, that as I am compiling the code through my CLI, that in some projects the output text remains all black, while others output text in black, yellow and green?
I also noticed that the top project is being ran through webpack, while the bottom is not. Is that something that is configurable?
1 post - 1 participant
I have updated my Ionic 4 project (angular based) to Ionic 5 using:
npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save
I noticed that it is using 8.2.14.
Does Ionic 5 currently work with Angular 10?
If not Angular 9?
Thanks,
Brent
1 post - 1 participant
Hi, recently I upgraded my Ionic application from 3 to 5 and I have been able to resolve all of the errors that have broken in the process. After fixing all the issues I am stuck on a white page even though in my logs it shows that the page is routing to the correct login page. These are the logs generated by the routing module:
Ionic Native: deviceready event fired after 0 ms
vendor.js:79085 Router Event: NavigationStart
vendor.js:79080 NavigationStart(id: 1, url: '/login')
vendor.js:79080
vendor.js:66254 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.js:79085 Router Event: RoutesRecognized
vendor.js:79080 RoutesRecognized(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080
vendor.js:79085 Router Event: GuardsCheckStart
vendor.js:79080 GuardsCheckStart(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080
vendor.js:79085 Router Event: ChildActivationStart
vendor.js:79080 ChildActivationStart(path: '')
vendor.js:79080
vendor.js:79085 Router Event: ActivationStart
vendor.js:79080 ActivationStart(path: 'login')
vendor.js:79080
vendor.js:79085 Router Event: GuardsCheckEnd
vendor.js:79080 GuardsCheckEnd(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } , shouldActivate: true)
vendor.js:79080
vendor.js:79085 Router Event: ResolveStart
vendor.js:79080 ResolveStart(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080
vendor.js:79085 Router Event: ResolveEnd
vendor.js:79080 ResolveEnd(id: 1, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
vendor.js:79080
vendor.js:79085 Router Event: ActivationEnd
vendor.js:79080 ActivationEnd(path: 'login')
vendor.js:79080
vendor.js:79085 Router Event: ChildActivationEnd
vendor.js:79080 ChildActivationEnd(path: '')
vendor.js:79080
vendor.js:79085 Router Event: NavigationEnd
vendor.js:79080 NavigationEnd(id: 1, url: '/login', urlAfterRedirects: '/login')
vendor.js:79080
vendor.js:79085 Router Event: Scroll
vendor.js:79080 Scroll(anchor: 'null', position: 'null')
vendor.js:79080
This is the app-routing.module:
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{
path: 'login',
component: LoginPage
},
{
path: 'auth',
component: AuthPage
},
{
path: 'care-team',
component: CareTeamPage
},
{
path: 'communities',
component: CommunitiesPage
},
{
path: 'dashboard',
component: DashboardPage
},
{
path: 'faq',
component: FaqPage
},
{
path: 'forgot-password',
component: ForgotPasswordPage
},
{
path: 'forgot-username',
component: ForgotUsernamePage
},
{
path: 'friends',
component: FriendsPage
},
{
path: 'hcs',
component: HcsPage
},
{
path: 'history',
component: HistoryPage
},
{
path: 'medicine-detail',
component: MedicineDetailPage
},
{
path: 'medicines',
component: MedicinesPage
},
{
path: 'notifications',
component: NotificationsPage
},
{
path: 'privacy',
component: PrivacyPage
},
{
path: 'profile',
component: ProfilePage
},
{
path: 'settings',
component: SettingsPage
},
{
path: 'signup',
component: SignupPage
},
{
path: 'terms',
component: TermsPage
},
{
path: 'wearables',
component: WearablesPage
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: true, useHash: true }),
],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }, ],
exports: [RouterModule]
})
export class AppRoutingModule { }
This is the app.module:
@NgModule({
declarations: [MyAppPage,
AuthPage,
CareTeamPage,
CommunitiesPage,
DashboardPage,
FaqPage,
ForgotPasswordPage,
ForgotUsernamePage,
FriendsPage,
HcsPage,
HistoryPage,
LoginPage,
MedicineDetailPage,
MedicinesPage,
NotificationsPage,
PrivacyPage,
ProfilePage,
SettingsPage,
SignupPage,
TermsPage,
WearablesPage
],
entryComponents: [MyAppPage],
imports: [BrowserModule,
AppRoutingModule,
HttpClientModule,
IonicSignaturePadModule,
NgbModalModule,
IonicModule.forRoot(),
NgbModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
ApiService,
Device,
Camera,
InAppBrowser,
FingerprintAIO,
LocalNotifications,
Contacts,
BackgroundMode,
Keyboard,
Firebase,
Badge,
HttpClient,
IonicsignaturepadProvider,
],
bootstrap: [MyAppPage],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
1 post - 1 participant
Hi there! I have the following code to set the backgroung in one single page.
If I use the gradient part alone, that works.
If I use the background image alone, that works as well.
When I combine both it does not work. Just a white background.
ion-content.home-content{
–background: linear-gradient(#1f7b98, #A7B2B6, #ABAFAE, #AA9d95) url(…/…/assets/images/background-transparent.png) 0 0/100% 100% no-repeat / cover;
}
Any idea what could be wrong?
1 post - 1 participant
Hi, what should I use to communicate mobile devices with a web server? I tried Apollo but it does not work for me and there is no support… What is the best approach if this is my first ionic project?
1 post - 1 participant
Hi Team,
I am trying ionic with vue/nuxt.
I am looking for a simple guidance or sample code for using scrollable ion-segment with ion-slides.
Plan is to show the products based on category. Categories will be put as segment and slides will have relevant products for that category.
Any guidance will be much appreciated.
I have observed similar example only in ionic angular.
1 post - 1 participant
Hi,
We have been using Ionic 5 with angular 10, capacitor. A part of our project is to allow users to upload and download files from a blob server like azure. We achieved uploading by using xmlhttprequest. It went fine.
When it comes to downloading, we tried using file plugin by cordova. It didn’t worked as well as its out of question to use cordova when i have capacitor. So, we switched to file system plugin. We tried with the sample code you have in the github and it seems to not work. Also our file comes as ablob. where as filesystem plugin doesn’t accept blob.
We tried to resolve the issue but so far not able to find a solution.
Can you provide us right information or path to take to achieve this?
1 post - 1 participant
Hi, I’m using firebase for data and file storage. I was wondering if larger files have issues for downloading on to the iOS device. Is there a specific setting in config.xml that I need to consider? Or was something changed by apple on iOS, like restrictions and guidelines for development? This behaviour is inconsistent from device to device. (edited)
1 post - 1 participant
Has anyone done any real-time navigation with an Ionic app way finding between points?
I am looking at doing some off road navigation for mountain bikes.
I will need some offline capability.
Keen to hear peoples experiences.
Thanks!
1 post - 1 participant
I need to implement UI on desktop as same as the gmail with reading pane. i.e. master-detail view with side menu.
Thanks in advance.
1 post - 1 participant
Hey there!
I wrote a pretty standard CRUD application so far using Ionic v5 / react.
In this app amongst other things I am using the following page navigation:
List Page > Detail Page > Detail Edit Page
Because I want to replace the Detail Page page with the Detail Edit Page page in the navigation history when clicking the edit button I am using
history.replace('/route/to/detail-edit')
So far so good.
My problem here is the automatic IonBackButton behavior.
Navigating List Page > Detail Page shows the IonBackButton correctly. But when the Detail Edit Page is shown (by history.replace) the replace button does not appear. The browser back button in turn leads me to the List Page as desired.
I would like to show the IonBackButton on the Edit Page targeting the List Page.
Any suggestions? Thank you very much!
1 post - 1 participant
I want to create my own tag. and i get this error
‘app-temp’ is not a known element:
1. If ‘app-temp’ is an Angular component, then verify that it is part of this module.
2. If ‘app-temp’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
1-) Created Component with ionic generate component components/temp
2-) added in app.module.ts
@NgModule({
declarations: [AppComponent, TempComponent],
*
*
3-) used <app-temp></app-temp> o any page in app
Could you help me with this solution ??
‘app-temp’ is not a known element:
1. If ‘app-temp’ is an Angular component, then verify that it is part of this module.
2. If ‘app-temp’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
1 post - 1 participant
I want to outsource my navigation in a layout component.
I have done all that so far. For testing I created two pages, Home and Contact.
When I load the application, everything is displayed correctly. If I now click on the navigation point Contact, the page changes as expected. If I click on the Home menu item again, the page changes, but the navigation on the left side disappears forever.
I hope you can help me
Here the structure of the different files. I also attach a picture of the folder structure
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {MainLayoutWithSideNavComponent} from './layout/main-layout-with-side-nav/main-layout-with-side-nav.component';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
canActivate: [],
},
{
path: 'home',
component: MainLayoutWithSideNavComponent,
canActivate: [],
loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
},
{
path: 'contact',
component: MainLayoutWithSideNavComponent,
canActivate: [],
loadChildren: () => import('./pages/contact/contact.module').then(m => m.ContactPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
main-layout-with-side-nav.component.html
<ion-split-pane contentId="main-content">
<ion-menu content-id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item *ngFor="let nav of navi" button [routerLink]="'/'+ nav.link">
<ion-icon slot="start"></ion-icon>
<ion-label>
{{nav.linkName}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<!-- <ion-title>Header</ion-title>-->
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-router-outlet></ion-router-outlet>
</ion-content>
</div>
</ion-split-pane>
app.component.html
<ion-app>
<ion-router-outlet animated="false"></ion-router-outlet>
</ion-app>
1 post - 1 participant